Drag and Drop in Reactive

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

mvp_badge
MVP
Solution

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

RWALabDragDropDemo.oml

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.


Regards,

Hemamalini V

mvp_badge
MVP

Hi Hemamalini,

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.

Regards,

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.


Regards,

Hemamalini V

TestApp.oml

mvp_badge
MVP

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();


Hi Daniel,

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.

Regards,

Hemamalini V

mvp_badge
MVP
Solution

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

RWALabDragDropDemo.oml

Hi Benjith Sam,

Thank you. It is working good now.


Regards,

Hemamalini V

mvp_badge
MVP

You're welcome, Hemamalini 

Glad to help you :)


Kind regards,

Benjith Sam

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?

Regards,

Ellakkiya.S

Hi Ellakkiya,

Thank you for your response.

Yes, I need to achieve the same you have attached in the URL.


Regards,

Hemamalini V 

Hello Hemamalini, 

 https://www.outsystems.com/forge/component-overview/7536/drag-and-drop-in-reactive 

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.