Mobile-first Drag And Drop Library - Draggable Touch

Mobile-first Drag And Drop Library - Draggable Touch
File Size: 4.2 KB
Views Total: 383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<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. 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 + "," +;

4. Disable the drag and drop functionality.


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