Total rewrite of drag&drop javascript library dragula.js into shiny new library with SOLID design principles. ( work in progress!!! )
THIS LIBRARY IS IN TURBULENT DEVELOPMENT, CODE IS RAPIDLY CHANGING AND REFACTORING. THIS LIBRARY IS NOT READY TO BE USED. IF YOU WANT TO BE NOTIFIED WHEN IT WILL BE READY, LET ME KNOW ON MY MAIL LUCKYLOOKE@GMAIL.COM
npm install dragon
* many thanks to Enrico Marino (@onirame) for transferring ownership of his dragon npm package in favor of this project.
Projects with module bundler:
import Dragon from 'dragon';
new Dragon( config );
Projects without module bundler:
<script src='./dragon.js'></script>
Projects with module bundler:
import Dragon from 'dragon';
new Dragon( document.getElementsByClassName('container') );
Projects without module bundler:
new Dragon( document.getElementsByClassName('container') );
Explained principes of the library to better understanding how it works and how you can extend it or hook on its parts, events etc.
Dragon library has few classes helping to make drags done precisely and reliably. The classes are: Dragon, Container, Item, Drag. There is also one shared object called space. The space object is where dragons live together.
Main purpose of space is to provide communication medium for dragons.
Main class of the library, it holds container objects so we can imagine it as group of containers.
An object associated with DOM element which holds draggable items.
An object associated with DOM element which represents draggable item.
An object representing the active drag, it holds references to item being dragged, source container where the item was placed in the beginning of drag and other related info.
Every drag has these stages: GRAB, DRAG, RELEASE.
Started with user interaction ( mousedown ) or by js, it is where Drag object instance is created. And it waits for starting signal ( movement, time, js ).
Dragging is happening and parameters are changing ( position [x,y], elementBehindCursor ). It has also state ( grabbed, moved, dragging, dropped, cancelled, cleaned ).
Drag is finished by release and several scenarios can occur. Dragged item can be placed into actual position, can be moved to initial position, or item can be removed. Depends on config and actual situation.
0.1.1 Some fixes
FAQs
Drag and drop SOLID
The npm package dragon receives a total of 0 weekly downloads. As such, dragon popularity was classified as not popular.
We found that dragon 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.