jquery.dragbettter
An alternative to dragenter
and dragleave
events that fires each event once.
What this is all about
There are two similar pairs of events that track mouse movement: mousein
+mouseout
and mouseenter
+mouseleave
. Let's say we're listening for these events on the <body>
element. The mouseenter
and mouseleave
events would fire only when mouse pointer enters or leaves the <body>
element itself. The mousein
and mouseout
events would trigger whenever mouse pointer crosses the border of any child within <body>
, with event.target
set to the child and the child's parent respectively.
The problem with the dragenter
and dragleave
events is that they work similar to mousein
and mouseout
. By March 2014, browsers do not provide drag-related events that would behave similar to mouseenter
+mouseleave
.
This makes it hard to track dragged file entering/leaving a region, especially when the region is the whole page.
jquery.dragbettter is a jQuery plugin that introduces two events: dragbetterenter
and dragbetterleave
that behave similar to mouseenter
+mouseleave
, i. e. fire only for the element itself and not for its children.
How to use
- Include jQuery and jquery.dragbetter somewhere on your page:
- Listen to
dragbetterenter
anddragbetterleave
events on an element:
var $dropzones = ;
Don't forget to either include this code after your HTML or wrap it with $(document).ready( function () { /*...*/ });
.
Demo
Here's a simple demonstration: http://jsbin.com/xexub/1/edit?html,css,js,output
Things to keep in mind
- The
dragbetterenter
anddragbetterleave
events work in pair. They won't work without each other, so attach to both of them on the same element. Attach todragbetterenter
first. - The callback function accepts an
event
argument as usual.event.target
will always be equal to the HTML element the event was attached to. - The
dragbetterleave
event will also trigger when there has been a drop inside the element, so that you can remove highlighting after the drop. You should use the normaldrop
event to perform drop-related actions.
Credits
Author: Andrey 'lolmaus' Mikhaylov E-mail: lolmaus@gmail.com
Sponsored by Hivemind.
Based on jquery.draghover.js by William Meleyal (william.meleyal@gmail.com).
Inspired by jquery.event.dragout by Dan Cork ([Firstname].[Lastname]@kickinteractive.net).
Thanks to Ian Bytchek for support.