Dragster.js

Lightweight, simple and fast drag and drop.

Move Items between two Containers. Simple and Precise.

  • 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 sill click on links - as expected

  • There's also the possibility of moving elements around in the same container, changing their position

  • 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!

There are many Events along the Lifecycle of a Drag

You can find them all in the documentation.

  • As soon as you start dragging an element, a drag event is fired.

  • Whenever an element is cloned because copy: true, a cloned event fires.

  • The shadow event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position.

  • A drop event is fired whenever an element is dropped anywhere other than its origin (where it was initially dragged from).

  • If the element gets removed from the DOM as a result of dropping outside of any containers, a remove event gets fired.

  • A cancel event is fired when an element would be dropped onto an invalid target, but retains its original placement instead.

  • The over event fires when you drag something over a container, and out fires when you drag it away from the container.

  • Lastly, a dragend event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop.

Drag'n'Kill me

Without hassle, you can easily remove items from a container just be dragging them out.

  • Burgers

  • Pizza

  • Coke

  • Bratwurst

  • Salad

  • Orange Juice

  • Gym

  • Training

You can find a list of all options in the documentation.

"I've survived the drop!"

By default, dropping an element outside of any known containers will keep the element in the last place it went over. You can make elements go back to origin if they're dropped outside of known containers, too.

  • Moving items between containers works as usual.

  • If you try to drop an item outside of any containers, though, it'll retain its original position.

  • When that happens, a cancel event will be raised.

  • Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers.

  • This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises.

Copying Simple as Always

  • 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.

Rules that will Guide your Way

You can setup specific rules to define which element can be dragged and where it can be dropped.

  • Like above, these elements will be duplicated on drag.

  • But the right side behaves differently.

  • Instead of copying, the right side lets you rearrange your elements.

Handles for Your Users?

You can setup specific rules to define which element can be dragged and where it can be dropped.

  • +

    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.

There are a few similar mechanisms to determine whether an element can be dragged from a certain container, whether an element can be dropped into a certain container at a certain position, and whether anelement is able to originate a drag event.

You can check them out in the documentation.

Click or Drag?

Dragster fires a click when the mouse button is released before a mousemove event, otherwise a drag event is fired. No extra configuration is necessary.