Advanced Draggable Plugin With jQuery - Inhance Draggable

A lightweight, advanced draggable plugin to enhance the drop and drop experience on your web application.

Features:

• Allows draggable element to move only on the x or y axis.
• Restricts draggable elements to move within a specified container.
• Callback functions.
• No 3rd draggable library needed. E.g. jQuery UI.

See Also:

• 10 Best Drag And Drop JavaScript Libraries

How to use it:

1. To get started, download and place the JavaScript file INHANCE_draggable.jquery.js after jQuery library.

<script src="/path/to/jquery.slim.min.js" ></script>
<script src="/path/to/INHANCE_draggable.jquery.js"></script>

2. Call the function to make an element draggable.

<div id="demo">Drag Me</div>

$(function(){
  $('#demo').INHANCE_draggable();
});

3. Restrict the draggable element within a container you specify.

<div id="myContainer">
  <div id="demo">Drag Me</div>
</div>

$(function(){
  $('#demo').INHANCE_draggable({
    container: '#myContainer'
  });
});

4. Enable drag and drop on X or y axis.

$(function(){
  $('#demo').INHANCE_draggable({
    lock: 'y'
  });
});

5. Callback functions which will be fired on drag start/end and dragging.

$(function(){
  $('#demo').INHANCE_draggable({
    onDragStart: function (e) {
      console.log('drag starts!', $(e).text());
    },
    onDragEnd: function (e) {
      console.log('drag ends!', $(e).offset().left, ', ', $(e).offset().top, $(e).text());
    },
    onDragging: function (e) {
      console.log('dragging...', $(e).text());
    }
  });
});

6. Destroy the plugin and disable the drag and drop functionality on the element.

$('#demo').destroy();

---

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