A tiny drag and drop vanilla JS library based on Mozilla's MDN example at a size of 2.8kb (js) and 461 bytes (css).
Alternatives include interactjs's drag & drop at 85Kb (js), JQuery-UI's minified stable v1.12.1 at 37.1kb (js) and 15.1kb (css), or Shopify's UX-enhanced Droppable at 414.7kb (concatenated-js).
mozDraggables is packaged, tested and restructured for the following easy(ier) to use features:
- flag for copy/move elements. Defaults to
"copy". Range["copy","move"]. (See:var copy_or_move_flag). - flag for can drag again behaviour. Defaults to
"false". Range["true","false"]. (See:var dropped_draggable_state). - style-dependent on CSS classes.
- tested for dynamically and statically loaded drop and drag elements.
Here's the demo below or feel free to clone the repo and browse to the demo.html page.
- The listener events for dragging and dropping are bound to the document, so make sure that doesn't conflict with other bound drag and drop events. See the original MDN source for details.
- Use display:inline; (or class .inline) on draggable elements such that their text/content is visible throughout the drag events.