Hi all,
I need to implement the drag and drop and change the position of containers in reactive web. I am facing some issues while trying it. Herewith, I have attached the image for reference. Kindly help me to resolve this issue as soon as possible.
Regards,
Hemamalini V
Hi Hemamalini,
In addition to Daniel's comment, I have observed that the element hierarchy in your implementation is not the same as what defined in the referred codepen.
See this sample app DragDropDemo
Refer to the attached .oml file
Note: I did a bit of change in the defined CSS definition as well.
I hope this helps you!
Kind regards,
Benjith Sam
Hi,
There are lots of components for Drag and Drop. you can use anyone.
I will suggest this one.
https://www.outsystems.com/forge/component-overview/294/drag-n-drop-sortable-list
https://armandogomes.outsystemscloud.com/SortableDemo/
Enjoy
Hi Amit Jain,
Thank you for your response,
My requirement is differ from that component available in Outsystems. I need to change the position of containers dynamically.
It will be a guessing game for someone to figure out what your problem is based on the description and the image you share.
Why not share the OML, and state which part of the code you got stuck, that will get people more easily help you.
Daniel
Hi Daniel,
Thank you for your response.
I got some errors in the javascript code. Herewith, I have attached the OML for your reference.
Hi the problem is the following statement in drag JS script:document.addEventListener("DOMContentLoaded", App.init);
Remove it.
Then create an OnReady event on the screen and add a javascript node.
In the javascript node add:
app.init();
Thank you for your response .
The javascript errors are solved and working now. But, I can't able to drag the container to it's target position container. It is working like the video below.
https://drive.google.com/file/d/1yuhbKL43wKw6HRFIo3ktMkNkjP0ITu8f/view?usp=sharing
Is it possible to get output like the below link
https://drive.google.com/file/d/1sLVl7JtDMICXly7zZK_wGAoKnLqiCyLT/view?usp=sharing
Thank you.
Hi Benjith Sam,
Thank you. It is working good now.
You're welcome, Hemamalini
Glad to help you :)
Hi Hemamalini Vijayan,
Regarding the attached link, there are many plugins available in the forge to achieve drag and drop in specific container.
https://www.outsystems.com/forge/component-overview/7536/drag-and-drop-in-reactive
In the previous reply you have mentioned "I need to change the position of containers dynamically."
This means are you going to interchange the position of the container.
do you need to interchange the position or drag and drop to the specific container?
I have also come accross the reqiurement for position interchange. Let me the attach the URL. Do you want to achieve this?
Ellakkiya.S
Hi Ellakkiya,
Yes, I need to achieve the same you have attached in the URL.
Hello Hemamalini,
If you go through this link which is already share by Ellakkiya then you will Find OML as well as
Demo
you will get what you want
Thanks and Regards,
Akshay Deshpande