jquery-draghandler

A simple high-performance jQuery plugin that helps you dealing with dragenter and dragleave events.

Usage

<script type="text/javascript" src="jquery.draghandler.min.js"></script>

$(document).ready(function() {

	$(selector).draghandler({
		onDragEnter: function() {
			// $(this).doSomething();
		},
		onDragLeave: function() {
			// $(this).doSomethingElse();
		}
	});

});

The problem

The ```dragleave``` event of an element is fired when hovering a child element of that element.

Consider the following DOM structure:

You want to handle the dragenter and the dragleave events for the element B (child of A).

At first, you would write something like that:

$(B).on("dragenter", function() {
		// $(this).doSomething();
});

$(B).on("dragleave", function() {
		// $(this).doSomething();
});

Soon you realize that when hovering the element C, the dragleave event is fired for the element B, which is something you certainly do not want.

Issues with other solutions

Until now, one possible solution to this problem was the following CSS workaround:

C {
  pointer-events: none;
}

That is: tells the browser to prevent C to fire any event. The drawback is that you completely lose event control over the C element, which is - again - something you certainly do not want.

jquery-draghandler: a different approach

jquery-draghandler uses a different logic.

Consider again the following DOM structure:

When dragging into the element B, jquery-draghandler intercepts the dragenter event for B. So far so good. The difference is that jquery-draghandler does not intercept the dragleave for B, when dragging out the element B. Instead, it intercepts the dragenter for the element A, calling the onDragLeave callback.

You can see that jquery-draghandler does not effect execution performances because it does not manipulate the DOM in any way. It just faces the problem with a different logic.