We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

ejDroppable - dragElement not available in over event

Thread ID:

Created:

Updated:

Platform:

Replies:

148255 Oct 11,2019 01:00 PM UTC Oct 15,2019 04:21 AM UTC jQuery 3
loading
Tags: General
Developer
Asked On October 11, 2019 01:00 PM UTC

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 [Syncfusion]
Replied On October 14, 2019 09:25 AM UTC

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. 
  
  
Could you please use the ejDraggable events and get back to us, if you require any further assistance. 
  
Regards, 
Keerthana. 


Developer
Replied On October 14, 2019 11:51 AM UTC

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 [Syncfusion]
Replied On October 15, 2019 04:20 AM UTC

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 
Please let us know, if you require any further assistance on this. 
Regards, 
Keerthana. 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon