dragula
Advanced tools
Package description
Dragula is a JavaScript library that provides drag-and-drop functionality for web applications. It is designed to be simple and easy to use, allowing developers to add drag-and-drop features to their projects with minimal configuration.
Basic Drag-and-Drop
This feature allows you to enable basic drag-and-drop functionality between two containers. The code sample demonstrates how to set up drag-and-drop between two HTML elements with IDs 'left' and 'right'.
const dragula = require('dragula');
const containers = [document.querySelector('#left'), document.querySelector('#right')];
dragula(containers);Copy Items
This feature allows you to copy items instead of moving them. The code sample shows how to enable the copy functionality, so items dragged from one container to another are duplicated rather than moved.
const dragula = require('dragula');
const containers = [document.querySelector('#left'), document.querySelector('#right')];
dragula(containers, {
copy: true
});Handle Drag Events
This feature allows you to handle drag events. The code sample demonstrates how to listen for the 'drag' event and log a message when an element is being dragged.
const dragula = require('dragula');
const containers = [document.querySelector('#left'), document.querySelector('#right')];
const drake = dragula(containers);
drake.on('drag', function(el) {
console.log('Element is being dragged:', el);
});SortableJS is a popular library for creating sortable lists and grids using native drag-and-drop functionality. It offers more advanced features compared to Dragula, such as multi-drag, swap, and custom animations.
React Beautiful DnD is a drag-and-drop library specifically designed for React applications. It provides a higher level of customization and better integration with React's state management compared to Dragula.
InteractJS is a versatile library that supports drag-and-drop, resizing, and multi-touch gestures. It offers more comprehensive functionality and customization options than Dragula, making it suitable for complex interactions.
Readme
Drag and drop so simple it hurts
Browser support includes every sane browser and IE7+.
Have you ever wanted a drag and drop library that just works? That doesn't just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn't need you to do a zillion things to get it to work? Well, so did I!
You can get it on npm.
npm install dragula --save
Or bower, too. (note that it's called dragula.js in bower)
bower install dragula.js --save
Dragula provides the easiest possible API to make drag and drop a breeze in your applications.
dragula(containers, options?)By default, dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that's not one of the containers, it'll be sent back to the container it was originally taken from.
Note that dragging is only triggered on left clicks, and only if no meta keys are pressed. Clicks on buttons and anchor tags are ignored, too.
The example below allows the user to drag elements from left into right, and from right into left.
dragula([left, right]);
You can also provide an options object. The options are detailed below.
options.acceptsYou can set accepts to a method with the following signature: (el, target, source). It'll be called to make sure that an element el, that came from container source, can be dropped on container target. Note that if options.copy is set to true, el will be set to the copy, instead of the originally dragged element.
options.copyIf copy is set to true, items will be copied rather than moved. This implies the following differences:
| Event | Move | Copy |
|---|---|---|
drag | Element will be concealed from source | Nothing happens |
drop | Element will be moved into target | Element will be cloned into target |
remove | Element will be removed from DOM | Nothing happens |
cancel | Element will stay in source | Nothing happens |
options.revertOnSpillBy default, spilling an element outside of any containers will move the element back to it's last known stable parent. Setting revertOnSpill to true will ensure elements dropped outside of any approved containers are moved back to the source element where the drag event began, rather than stay at the last known stable parent.
options.removeOnSpillBy default, spilling an element outside of any containers will move the element back to it's last known stable parent. Setting removeOnSpill to true will ensure elements dropped outside of any approved containers are removed from the DOM. Note that remove events won't fire if copy is set to true.
options.directionWhen an element is dropped onto a container, it'll be placed near the point where the mouse was released. If the direction is 'vertical', the default value, the Y axis will be considered. Otherwise, if the direction is 'horizontal', the X axis will be considered.
The dragula method returns a tiny object with a concise API. We'll refer to the API returned by dragula as drake.
drake.cancel(revert)If an element managed by drake is currently being dragged, this method will gracefully cancel the drag action. Note that a cancellation may still result in a drop event if the last known position was a container other than the source and revertOnSpill isn't true. You can also pass in revert at the method invocation level.
drake.remove()If an element managed by drake is currently being dragged, this method will gracefully remove it from the DOM.
drake.on (Events)The drake is an event emitter. The following events can be tracked using drake.on(type, listener):
| Event Name | Listener Arguments | Event Description |
|---|---|---|
drag | el, container | el was lifted from container |
drop | el, container | el was dropped into container |
cancel | el, container | el was being dragged but it got nowhere and went back into container, it's last stable parent |
remove | el, container | el was being dragged but it got nowhere and it was removed from the DOM. It's last stable parent was container. |
shadow | el, container | el, the visual aid shadow, was moved into container. May trigger many times as the position of el changes, even within the same container |
drake.destroy()Removes all drag and drop events used by dragula to manage drag and drop between the containers. If .destroy is called while an element is being dragged, the drag will be effectively cancelled.
MIT
FAQs
Unknown package
The npm package dragula receives a total of 155,443 weekly downloads. As such, dragula popularity was classified as popular.
We found that dragula demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.