jQuery Plugin For Drag And Drop Within A Boundary - Zdrag

Zdrag is a lightweight jQuery draggable plugin for drag and drop functionality within a boundary that supports both directions and custom drag handlers.

How to use it:

1. Include the jQuery Zdrag plugin's script after you've included the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script type="text/javascript" src="Zdrag.js"></script>

2. Add a drag handler plugin to your draggable element.

<div id="box">
  <div id="handler"></div>
</div>

3. Enable the drag and drop functionality on the element.

$("#box").drag();

4. Set the cursor style as you hover over the draggable element.

$("#box").drag({
  cursor : 'move'
});

5. Set the parent container.

$("#box").drag({
  parent : 'body'
});

6. Set the boundary.

$("#box").drag({
  movable_region : [0,0,0,0]
});

7. Set the handler element.

$("#box").drag({
  dragHandler : ''
});

8. Set the direction.

$("#box").drag({
  direction : "all" // or "x", "y"
});

9. Execute a callback function on drag end.

$("#box").drag({
  callback : function(){}
});

Change log:

2017-11-13

• added more callbacks

---

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