Drag And Drop Plugin With jQuery – draganddrop.js

File Size:8.73 KB
Views Total:531
Last Update:April 5, 2018
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

jQuery plugin to allow dragging and dropping of elements and sorting of lists and other nested structures. Supports single element, nested elements and grouped list. Compatible with touch and desktop devices.

How to use it:

  1.  Add Links:
    <link href="draganddrop.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="draganddrop.js"></script>
  2.   Enable the draggable functionality:
    <div class="element">
      ...
    </div>
    $('.element').draggable();
  3.  Enable the sortable and draggable functionalities in Html:
    <ul class="demo">
      <li>Item 1</li>
      <li>Item 2
        <ul>
          <li>Item 2.1</li>
          <li>Item 2.2
            <ul>
              <li>Item 2.2.1</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Item 3
        <ul>
          <li>Item 3.1</li>
        </ul>
      </li>
    </ul>
  4.  Possible options to customize the sortable function:
    $('.demo').sortable({
      handle: false, // handle selector
      container: container_type,
      container_type: container_type,
      same_depth: false,
      nodes: node_type,
      nodes_type: node_type,
      placeholder_class: null,
      auto_container_class: 'sortable_container',
      autocreate: false, // creates nested containers within nodes
      group: false, // is grouped
      scroll: false, // is scrolled
      up<a href="http://www.jqueryshare.net/accordion/">date</a>: null // callback
    });
  5.  Possible options to customize the draggable function:
    $('.demo').draggable({
      handle: false,
      delegate: false, // selector of delegate element
      revert: false,
      placeholder: false,
      droptarget: false,
      container: false,
      scroll: false,
      //callbacks
      update: null,
      drop: null
    });

    Done 🙂