Mobile-first Drag And Drop Library - Draggable Touch

File Size: 3.56 KB
Views Total: 7202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="draggable">
  Element 2

<div class="draggable">
  Element 3

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

  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 + "," +;
}).on("dragend", function(e, pos) {
  console.log("dragend:", this, pos.left + "," +;

5. Disable the drag and drop functionality.




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


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


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