Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@livingdocs/jquery.dragbetter
Advanced tools
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.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/js/jquery.dragbetter.js"></script>
dragbetterenter
and dragbetterleave
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 () { /*...*/ });
.
dragbetterenter
and dragbetterleave
events work in pair. They won't work without each other, so attach to both of them on the same element. Attach to dragbetterenter
first.event
argument as usual. event.target
will always be equal to the HTML element the event was attached to.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 normal drop
event 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.
FAQs
jquery.dragbettter ==================
We found that @livingdocs/jquery.dragbetter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.