1. Home
  2. Forum
  3. Vue
  4. How to drag and drop(Re-Arrangeable) list of List-Boxes

How to drag and drop(Re-Arrangeable) list of List-Boxes

Hi Team,

I am working on a requirement where I am supposed to have re-arrangeable list-boxes in a div, where list-boxes are drag and droppable. I am attaching example below where I am iterating list-boxes and able to get updated list-box arrays but facing difficulty in making list-boxes drag and droppable(re-arrangeable).

How can we make list-boxes drag and droppable and how to get updated list-box order?

Re-Arrangeable List-Boxes Screenshot from attached example

Please let me know how I can achieve this.

Thanks & Regards,
Cyril Ovely


Attachment: listboxexample_ba1bde1.zip


7 Replies 1 reply marked as answer
TS Thaneegairaj Sankar Syncfusion Team April 1, 2022 11:36 AM UTC

Hi Cyril,


We can able to drag and drop the element. Please refer the below UG documentation link,


UG: https://ej2.syncfusion.com/vue/documentation/common/drag-and-drop/#drag-and-drop


Could you please check the above details and get back to us, if you need any further assistance on this.


Regards,

Thaneegairaj S


CO Cyril Ovely April 19, 2022 04:47 AM UTC

Hi Thaneegairaj,


The solution you have suggested is not suitable for our requirements as we are generating the list-boxes in a dynamic way. Moreover, one list box never be placed on another list box, it should be like a grid while we drag and drop. Specifically list boxes should be like columns in a table.

I am attaching a video of our requirement. Please let me know how to achieve this using syncfusion UI components.

Please refer to the example attached below along with requirement video.

Need to update list-boxes as re-arrangable


Thanks & Regards,
Cyril Ovely


Attachment: requirementexampleandvideo_a2c3dae0.zip

CO Cyril Ovely April 28, 2022 06:28 AM UTC

Hi Team,


Waiting for your reply. Please let us know if we need to change any structure.

Thanks & Regards,
Cyril Ovely


YA YuvanShankar Arunagiri Syncfusion Team April 29, 2022 04:56 AM UTC

Hi Cyril,


We are currently working on this and will update the further details shortly.


Regards,

YuvanShankar A


YA YuvanShankar Arunagiri Syncfusion Team April 29, 2022 05:37 AM UTC

Hi Cyril,


We have prepared a sample based on your requirement, please find the sample attachment, and get back to us if you need further assistance on this.


Regards,

YuvanShankar A


Attachment: dragdroplistboxes_dcd16d84.zip

CO Cyril Ovely May 2, 2022 05:15 PM UTC

Hi YuvanShankar A,


Thanks for your response. After making a few changes I am able to change list-boxes order. I am attaching the updated code.


Regards,
Cyril Ovely


Attachment: updatesortablelistbox_abb43d66.zip

Marked as answer
YA YuvanShankar Arunagiri Syncfusion Team May 4, 2022 06:32 AM UTC

Hi Cyril,


We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.


Regards,

YuvanShankar A


Loader.
Up arrow icon