ejDroppable - dragElement not available in over event

[Developer]

In the "drop" event of the ejDroppable i can find the dragElement in the args of the event.

How can i get the dragElement in the "over" event?

In the dragElement i have some informations which i need to check if the over operation should be canceled.

And i would like to change the icon(defined in the helper i think) if a drop ist not possible with the current dragElement information.

Regards

Michael

[Keerthana Rajendran]

Hi Michael, 

  

Good day to you. 

  

Our ejDraggable plugin allows a DOM element to be moved using mouse whereas and ejDroppable makes DOM element Droppable. For your scenario, you can use ejDraggable plugin events to get the corresponding drag element and do the necessary actions. 

  

https://help.syncfusion.com/api/js/ejdraggable#events 

  

Could you please use the ejDraggable events and get back to us, if you require any further assistance. 

  

Regards, 

Keerthana. 

[Developer]

I have a visualisation with let's say four panes.

In one pane i have some objects/elements which are draggable. This pane only should use ejDraggable to define the possible drag objects.

Then i have some other panes, where it should be possible to drop this draggable object.

The other panes only should implement ejDroppable, an if the scope of ejDraggable and ejDroppable is identically it should be possible to drop the object.

No pane should know something of the other panes.

I know that it would also be possible to implement it by only using the ejDraggable, but i think that would not be the correct way. But for what is the droppable if i only should use draggable.

If i only use ejDraggable i have to implement some events which would be send from the one pane to an overview pane and from there to all other panes, and then the other panes return back the information if the drop is possible in her pane or not.

But i think ejDroppable is doing that already, with only one problem that i don't understand.

ejDraggable => All events(dragStart, drag and dragStop) have the element instance in the args of the event.

ejDroppable => The drop event have also the element instance(dragElement) in the args of the event, but why is this information not in the over event?

In my opinion it should also be available in the over event, otherwise i can not use the cancel property in this event meaningful. I want to check if the dragged object is already in the other pane and therefore i want to cancel the drag operation.

Regards

Michael

[Keerthana Rajendran]

Hi Michael,  

 

Good day to you.  

 

We checked your requirement and it seems you need to check the drag element in drop event and perform some operations based on this. We suggest you to maintain a global variable in  your project and update this variable with the drag element during dragStart event. You can use this variable in “over” event of ejDroppable to check the element which is dragged. Please refer to the following code 

 

<script type="text/javascript"> 

        var dragElement; //declare global variable 

        $("#dropContainer").ejDroppable({ 

            over: function (args) { 

                if (dragElement[0].id = "drag") { //check the element through global variable 

                    alert(dragElement[0].id + " element is moved over the drop container") 

                } 

            } 

        }); 

        function onCreate(args) { 

            $('#drag').ejDraggable({ 

                clone: true, 

                dragArea: ".frame", 

                dragStart: "ondragstart" 

            }); 

        } 

        function ondragstart(args) { 

            dragElement = args.element; //update the variable during dragStart of all drag elements. 

        } 

    </script> 

 

Please refer to the following sample link 

https://jsplayground.syncfusion.com/5zhjy5dx  

Please let us know, if you require any further assistance on this. 

Regards, 

Keerthana.