@livingdocs/jquery.dragbetter
v0.1.4
Published
jquery.dragbettter ==================
Downloads
1,611
Readme
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:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/js/jquery.dragbetter.js"></script>
- Listen to
dragbetterenter
anddragbetterleave
events on an element:
var $dropzones = $('.dropzone');
$('body')
.on('dragbetterenter', function() {
$dropzones.addClass('highlighted');
})
.on('dragbetterleave', function() {
$dropzones.removeClass('highlighted');
})
Don't forget to either include this code after your HTML or wrap it with $(document).ready( function () { /*...*/ });
.
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: [email protected]
Sponsored by Hivemind.
Based on jquery.draghover.js by William Meleyal ([email protected]).
Inspired by jquery.event.dragout by Dan Cork ([Firstname].[Lastname]@kickinteractive.net).
Thanks to Ian Bytchek for support.