Touch-friendly Drag And Drop Plugin With jQuery - drag-drop.plugin.js

Yet another jQuery drag'n'drop plugin enables drag and drop interactions on any elements, compatible with both mouse and touch events.

How to use it:

1. Include both jQuery library and the jQuery drag-drop.plugin.js script on the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.drag-drop.plugin.js"></script>

2. Call the function to enable the drag and drop functionality on specific elements.

$("#list>li").dragdrop();

3. Possible plugin options to config the drag and drop operation.

$("#list>li").dragdrop({

  // Drag a clone of the source, and not the actual source element
  makeClone: false,  

  // Class to apply to source element when dragging a clone of the source element
  sourceClass: null, 

  // Specify with true that the source element should hade visibility:hidden while dragging a clone
  sourceHide: false, 

  // Class to apply to the element that is dragged
  dragClass: null,   

  // Class to apply to the dragged element when dropping is possible
  canDropClass: null, 

  // Class to apply to the element that is dropped
  dropClass: null,

  // is active
  isActive: true,

  // if set, dragging is limited to this container
  container: null, 

  // Default is to allow all elements to be dragged
  canDrag: function($src, event) {
    return $src;
  },

  // Default is to allow dropping inside elements with css stylesheet "drop"
  canDrop: function($dst) {
    return $dst.hasClass("drop") || $dst.parents(".drop").size()>0;
  },

  // Default is to move the element in the DOM and insert it into the element where it is dropped
  didDrop: function($src, $dst) {
    $src.appendTo($dst);
  }
  
});

---

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