Drag and Drop with javascript?


I'm trying to make a drag and drop interface where you can drag and drop items ("Name") between two containers and also sort them in any order you'd like to. I'm not too familiar with javascript and even less with jquery. I read some tutorials on javascript and I tried to replicate it on my screen: the only thing I managed to achieve so far is to set the containers as draggable items. I tried to change properties like ondrag, ondragstart and so on at the containers but nothing worked. I also tried to insert the full script on the javascript section of the page but it also had zero effects.

Are there any examples on how to do this with javascript? I found a couple examples on the forge but all of them use jquery or don't have the javasrcipt easily accessible in the module. At the moment I'd just like to make a simple functional screen before making things more complicated.

Hi Bruno,

Your question is about javascript, nothing to do with OutSystems.

For OutSystems there are Forge components that implement Drag and Drop that you can check out, Probably all of them implement this with Javascript. So you can install them, use them and inspect the code on how it is implemented:



Hi Bruno,

Daniël is right, those examples should help you.

I understand you are attempting to use drap and drop to achieve your goals; so if that is mandatory for you, you may ignore my suggestion here.

Otherwise, drag and drop in javascript is tricky to implement, particular as there are differences between browsers.

It appears you are attempting to implement a multiple selection control. If thats right there are other options.  If not, you can still use a button click with AJAX instead of drag and drop.

For multi select:

You can use a ListBox with Select Mode = Multiple

If there are many values to select from, using select2 with the list control will enable filtering. https://www.outsystems.com/forums/discussion/32689/select2-multiple-selection/

Otherwise if you need to use two lists, try using ajax, where a click on a value in the list triggers a server action via ajax which moves the item from one list to the other.  Then requery both lists and refresh a panel containing the lists.

I hope this helps!

Kind regards,