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

redrop-dnd

v1.0.3

Published

Redrop is a JS drag and drop library, an alternative to native HTML5 drag and drop API

Downloads

275

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

gokunikgokunik

Keywords

redropdrag and dropHTML5 drag and dropJavascript drag and drop

Readme

ReDrop: A Simplified JavaScript Drag and Drop Library

[!IMPORTANT] ReDrop is not recommended for use in production environments, as it will not receive long-term support. Instead, it is ideal for hobby and portfolio projects due to its simplicity and quick setup. This library serves as a prototype, showcasing how ReDrop can simplify implementing drag-and-drop functionality.

About

ReDrop is a JavaScript drag and drop library, offering an intuitive alternative to the native HTML5 drag and drop API. ReDrop tries to make drag and drop as simple, quick and easy as possible. ReDrop is not built on top of HTML5 drag and drop API because of it's limitations. Under the hood ReDrop uses pointer events to simulate drag and drop with added features.

For more information about the library please visit the documentation here

Purpose

The purpose behind creating ReDrop is to address the shortcomings of the native HTML5 drag and drop API. If you've ever used the HTML5 drag and drop API, you're likely aware of its limitations for modern web applications and how outdated it can feel.

During my previous job, I encountered these limitations firsthand when tasked with creating a drag and drop system for our React application. Despite searching for a suitable library, I couldn't find one that met our needs. Consequently, I had to develop a custom solution using the native API, which highlighted its shortcomings.

Isn't it odd that a core JavaScript API, meant to facilitate drag and drop functionality, falls short on mobile devices despite its desktop compatibility? While browser providers share some blame for improper implementation on mobile, the native API itself lacks adequate support and updates.

For more insights into the challenges posed by HTML5 drag and drop, feel free to explore this article further.

Features

  • Easy to setup. Unlike native api you don't need to do multiple things to just make a single element draggable or droppable.You can just pass in the css selectors(class, id, tag, attribute selector, etc) and you're good to go. You don't even need to set up an event listener. Everything is handled for you.
  • Give you extra control of your drag and drop elements by providing additional data that is usefull in managing drag and drop applications. For example, it maintains the list of all drag and drop elements with its current state.
  • Provide all events that are avaialble in HTML5 drag and drop API. You can listen to ondragstart, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondrop, ondragend.
  • Unlike HTML5 drag and drop API, ReDrop works well both on desktop and mobile devices. Under the hood it utilizes pointer events to simulate drag and drop.

Installation

For installation guide please visit the installation documentation here

How to Contribute

If you have any suggestions or questions, please feel free to open an issue. For know you can create a issue or get in touch with me on Github or through my socials if you want to contribute.

Contact