I've got a JavaScript function with an eventListener for `dragover.

It looks like this:

    document.getElementById("someID").addEventListener("dragover",
        function(){ 
            //Do logic
        }, 
     false);

The thing is - someID will be a dynamic element - it gets removed and added on the page. After it's removed and added back in, the eventListener will no longer pickup the dragover event. The only way I know of how to deal with this situation is to use jQuery's .on()

My problem: I can't find the dragover event under jQuery API... Does it even exist? If not how can I use it in jQuery?

I've got a JavaScript function with an eventListener for `dragover.

It looks like this:

    document.getElementById("someID").addEventListener("dragover",
        function(){ 
            //Do logic
        }, 
     false);

The thing is - someID will be a dynamic element - it gets removed and added on the page. After it's removed and added back in, the eventListener will no longer pickup the dragover event. The only way I know of how to deal with this situation is to use jQuery's .on()

My problem: I can't find the dragover event under jQuery API... Does it even exist? If not how can I use it in jQuery?

• javascript
• jquery
• drag-and-drop

1 Answer 1

You can define a customer drag event as,

(function(jQuery) {

//Defining drag event.
jQuery.fn.drag = function() {
    eventType = arguments[0] || 'dragstart';
    onEvent = typeof arguments[1] == 'function' ? arguments[1] : function() {
    };
    eventOption = arguments[2] || false;

    $(document).on('mouseover', $(this).selector, function() {
        if ($(this).hasClass(eventType)) {
            return;
        }
        if (! typeof eventType == 'string') {
            return;
        }

        console.log('Binding Drag Event');
        $(this).each(function() {
            $(this)[0].addEventListener(eventType, onEvent, eventOption);
            $(this).addClass(eventType);
        })
    });
}
})(jQuery);

And then you have to add this as a plugin and apply it for required selector as follows.

$('#someID').drag('dragover', function(){ 
        //Do logic
        alert('DRAGGING!!!!!!');
    }, 
 false);

Working fiddle http://jsfiddle/sadepu/aDYfP/