Empire

Drag&Drop

  2. Advanced UI
  3. Drag&Drop
Dragula
You can move these elements between these two containers
Moving them anywhere else isn't quite possible
Anything can be moved around. That includes images, links, or any other nested elements. (You can still click on links, as usual!)
There's also the possibility of moving elements around in the same container, changing their position
This is the default use case. You only need to specify the containers you want to use
More interactive use cases lie ahead

Moving <input/> elements works just fine. You can still focus them, too.

Make sure to check out the documentation on GitHub!
Copying
When elements are copyable, they can't be sorted in their origin container
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
Whenever that happens, a cloned event is raised
Note that the clones get destroyed if they're not dropped into another container
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
Drag handle
Move me, but you can use the plus sign to drag me around.
Note that handle element in the moves handler is just the original event target.
This might also be useful if you want multiple children of an element to be able to trigger a drag event.
You can also use the moves option to determine whether an element can be dragged at all from a container, drag handle or not.
Sortable.js
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  •   Item 1
  •   Item 2
  •   Item 3
  •   Item 4
  •   Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4