Skip to content

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

License

Notifications You must be signed in to change notification settings

monteiz/jquery-draghandler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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:

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:

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published