Drag and drop with copy

[gaurav singh]

Hi,

We need to implement a drag and drop feature in our project using react JS. I am giving you an example of what have to do in our project.

We have a menu list of items that need to be drag and drop by mouse click into another div which have image over there

and I need x and y coordinate of that dragged item relative to that DIV. On the drop, we will use the Select Area library of Jquery to make coordinate(https://github.com/360Learning/jquery-select-areas).

Just like your Pdf viewer control.

And dragged select Menu item should not be removed from Menu List.

I tried withhttps://ej2.syncfusion.com/react/documentation/common/drag-and-drop/but I am getting error.

Please help me out.

Thanks in advance

[Jesus Arockia Sankaran S]

Hi Gaurav, 

Thank you for contacting Syncfusion support. 

WE have checked your query related to Syncfusion Drag and Drop library and we have created simple application where we have set true for Clone property which will prevent removing the element from the drag source. Also, we can get the dragged element in the drop event argument. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/systemjs-react-syncfusion-1959140871 

Code Snippet: 

 public componentDidMount(): void { 

        let draggable:Draggable = new Draggable(document.getElementById('draggable'),{clone: true}); 

        let droppable: Droppable = new Droppable(document.getElementById('droppable'), { 

            drop: (e: DropEventArgs) => { 

                e.droppedElement.querySelector('#drag').textContent = 'Dropped'; 

            } 

        }); 

    } 

Reference Image: 

 

 

 

Please get back to us if you need any further assistance on Syncfusion components.  

Regards, 

Jesus Arockia Sankaran S