Advanced Draggable Plugin With jQuery - Inhance Draggable

Advanced Draggable Plugin With jQuery - Inhance Draggable
File Size: 3.79 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.