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.
I want to specially thank to Joe Hill for releasing the 'dragon' npm username in favor of the dragon library, so I was able to crete @dragon organisation. So plugins of the library can be namespaces under @dragon/plugin-name
0.3.0 Inherited options
FAQs
Drag and drop SOLID
The npm package dragon receives a total of 12 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
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.