/dndbus

Drag'n'Drop Bus to make drag & drop easily usable in Vue components by providing a separation of data modifications and view

Primary LanguageTypeScriptMIT LicenseMIT

DndBus

Library to faciliate drag & drop between Components in a web site, for example between Vue components.

Features

  • Drag elements
  • Insertion Preview
  • candrop(el, src, src_idx, dst, dst_idx) if the user can only drop following custom rules, these rules can be implemented here
  • Does not modify any lists itself to play nice with state maneged by a UI library like Vue.
  • Support for recursive structures
  • Support for wrapping structures

Limitations

  • does not directly work on lists or similar elements but simply calls a callback for the actual move operation, so you'll need to implement that yourself.
  • Expects the DOM Elements to be in the order from top-left, top-left-second, top-left-third, .., bottom-right (TL to BR with horizontal neighbors next to each other)

Building (the example)

tsc  # to compile src/dndbus.ts to the build/-directory
cd example/
yarn serve  # to run the sample application. It will output how it is reachable with your browser

Example

The exmaple/ directory contains a very simple example how to use this library.
src/dragbus.js creates a bus instance that will be shared between all components and defines the callback function move which does the actual moving of elements after a successful drop.
src/components/SortableList.vue contains an example component with draggable elements. Those can then be reordered or dragged to the other List.