Mobile-first Drag And Drop Library - Draggable Touch

Draggable Touch is a jQuery based mobile-first drag and drop library that makes any DOM elements draggable via touch events.

Supports draggable multiple elements and even children elements at the same time.

The plugin also has a fallback that uses mouse events, in case the device doesn't support touch events.

You can find more drag and drop libraries here: 10 Best Advanced Drag And Drop Plugins.

How to use it:

1. Download and load the jquery.draggableTouch.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jquery.draggableTouch.js"></script>

2. Attach the function draggableTouch to the target element to be draggable. That's it.

<div class="draggable">
  Element 1
</div>

<div class="draggable">
  Element 2
</div>

<div class="draggable">
  Element 3
</div>

$(function(){
  $(".draggable").draggableTouch();
});

3. Determine whether to use CSS transform instead of left & top.

$(".draggable").draggableTouch({
  useTransform: true
});

4. Available events which will be fired on drag start and end.

$(".draggable").on("dragstart", function(e, pos) {
  console.log("dragstart:", this, pos.left + "," + pos.top);
}).on("dragend", function(e, pos) {
  console.log("dragend:", this, pos.left + "," + pos.top);
});

5. Disable the drag and drop functionality.

$(".draggable").draggableTouch("disable");

Changelog:

2021-11-14

• Call preventDefault() on touchstart to prevent magnifier to appear on iOS 15

2021-05-09

• Change the way we check if touch events are available, to a method that is compatible with cypress mobile commands

2021-03-11

• Add support for setting element position using CSS transform instead of left & top

---

This awesome jQuery plugin is developed by heyman. For more Advanced Usages, please check the demo page or visit the official website.