Mobile-first Drag And Drop Library - Draggable Touch

Mobile-first Drag And Drop Library - Draggable Touch
File Size: 4.2 KB
Views Total:
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="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</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");

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