npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@livingdocs/jquery.dragbetter

v0.1.4

Published

jquery.dragbettter ==================

Downloads

2,074

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

  1. 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>
  1. Listen to 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 () { /*...*/ });.

Things to keep in mind

  • The 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.
  • 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 normal drop 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.