Make HTML Elements Draggable Using Touch Events

jquery-draggable-touch

Draggable Touch is a jQuery-based mobile drag and drops library that makes any DOM elements draggable via touch events. The main app uses touch events, but the plugin also has a backup that uses mouse events.

The main reason this plugin exists is that there isn’t currently a good jQuery plugin to make draggable objects, which has touchscreen devices as its main goal (at least I know that). JQuery UI contains a retractable plugin that, with jQuery UI Touch Punch, can be used to make items draggable on touch devices. However, because Touch Punch creates fake mouse events, and the jQuery UI’s draggable plugin, uses these fake mouse events when dragging items, it’s error-prone and contains strange bugs.

I decided it was easier to write a retractable plugin whose main purpose was touch events, and it used touch events (although it still has a reserve for mouse events when the browser/device doesn’t support touch events).

Supports multiple draggable elements and even sub-items at the same time. The plugin also has a backup that uses mouse events, in case the device doesn’t support touch events.

Mobile-first Drag And Drop Library, jQuery Draggable Touch Plugin/Github, drag and drop touch screen javascript, drag and drop touch events

How to make use of 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 goal aspect to be draggable.

<div class="draggable">
  Element 1
</div>

<div class="draggable">
  Element 2
</div>

<div class="draggable">
  Element 3
</div>
$(function(){
  $(".draggable").draggableTouch();
});

3. Determine whether or not to make use of CSS rework as a substitute for left.

$(".draggable").draggableTouch({
  useTransform: true
});

4. Available occasions which shall be fired on drag begin and finish.

$(".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);
});

5. Disable the drag-and-drop functionality.

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

jquery ui touch punch, jquery ui draggable mobile, jquery mobile drag and drop, bootstrap drag and drop


See Demo And Download

Official Website(jqueryscript): Click Here

This superior jQuery/javascript plugin is developed by jqueryscript. For extra Advanced usage, please go to the official website.