jQuery Plugin For Drag And Drop Within A Boundary - Zdrag

File Size: 4.77 KB
Views Total: 1441
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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>

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


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

  cursor : 'move'

5. Set the parent container.

  parent : 'body'

6. Set the boundary.

  movable_region : [0,0,0,0]

7. Set the handler element.

  dragHandler : ''

8. Set the direction.

  direction : "all" // or "x", "y"

9. Execute a callback function on drag end.

  callback : function(){}

Change log:


  • 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.