Mobile-first Drag And Drop Library - draggable-div-with-touch.js

draggable-div-with-touch.js is a small jQuery draggable plugin that enables mobile-friendly drag'n'drop functionality without using third-party libraries like jQuery UI. Inspired by heyman's Draggable Touch plugin.

The best part is that the plugin enables any DIV container to be draggable and droppable only within the viewport. It checks if the device has touch support, and if not, fallbacks to use mouse events.

How to use it:

1. Download and insert the JavaScript file draggable-div-with-touch.js after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/draggable-div-with-touch.js" /></script>

2. Call the function draggableTouch to any DIV elements which should be draggable. That's it.

<div class="DraggableDiv">
  ... Any Content Here ...
</div>

$(function(){
  $('.DraggableDiv').draggableTouch();
});

3. Trigger functions on drag start/end.

$('.DraggableDiv').draggableTouch()
.on("dragstart", function(event, pos) {
    console.log("drag started on:", this, "at position:", pos);
})
.on("dragend", function(event, pos) {
  console.log("drag ended on:", this, "at position:", pos);
});

4. Disable the draggable functionality.

$('.DraggableDiv').draggableTouch("disable");

Changelog:

2021-09-17

• JS update

---

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