An alternative to dragenter and dragleave events that fires each event once.
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.
- 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
dragbetterenteranddragbetterleaveevents 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 () { /*...*/ });.
Here's a simple demonstration: http://jsbin.com/xexub/1/edit?html,css,js,output
- The
dragbetterenteranddragbetterleaveevents work in pair. They won't work without each other, so attach to both of them on the same element. Attach todragbetterenterfirst. - The callback function accepts an
eventargument as usual.event.targetwill always be equal to the HTML element the event was attached to. - The
dragbetterleaveevent 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 normaldropevent to perform drop-related actions.
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.