Fast Touch-enabled Drag And Drop Library - Dragon.js

File Size: 10.6 KB
Views Total: 1463
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fast Touch-enabled Drag And Drop Library - Dragon.js

Dragon.js is a fast, mobile-friendly drag and drop library for jQuery that enables you to drag anything with either mouse or touch events.

How to use it:

1. Add the main script jquery.dragon.js to the page after you've loaded the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.dragon.js"></script>

2. Enable the drag and drop functionality on an element you specify. That's it.

<div id="draggableElement">
  <p>I'm Draggable</p>

3. Determine the axis that constrains dragging to. Either 'x' or 'y'. Disabled by default.

  'axis': 'x' // or 'y'

4. Enable the element to only be draggable within a specific container.

  'within': $('#container')

5. Enable a handle element to drag the element.

  'within': $('#container')

6. Trigger functions on drag, dragStart, and dragEnd.

  'handle': 'p'

7. More configuration options.


  // If true, the mouse cursor icon isn't changed to move when the element is dragged.
  noCursor: false,

  // Prevent setting the initial inline styles for top, left, and position (they are set once the user begins dragging regardless)
  noInitialPosition: false


8. Enable/disable the drag and drop functionality.


9. To create a mobile-friendly slider control, load the following JavaScript and CSS files in the document.

<link rel="stylesheet" href="/path/to/src/css/jquery.dragon-slider.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/src/jquery.dragon-slider.js"></script>

10. Create a slider control on the page.

var slider = $('.sliderControl').dragonSlider({
    drag: function(){
      // Fires every tick that the user drags the slider handle for.
    // the width of the slider control
    width: 300

11. Set & get the value of the slider control.

// get

// set
slider.dragonSliderSet(0.5, false);

// with a drag event handler
slider.dragonSliderSet(0.5, true);

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