Mobile-first Drag And Drop Library - Draggable Touch

Mobile-first Drag And Drop Library - Draggable Touch
File Size: 3.26 KB
Views Total: 641
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="/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. 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);
});

4. Disable the drag and drop functionality.

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

Changelog:

2021-01-12


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