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>
</div>

$('#draggableElement').dragon();

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

$('#draggableElement').dragon({
  'axis': 'x' // or 'y'
});

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

$('#draggableElement').dragon({
  'within': $('#container')
});

5. Enable a handle element to drag the element.

$('#draggableElement').dragon({
  'within': $('#container')
});

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

$('#draggableElement').dragon({
  'handle': 'p'
});

7. More configuration options.

$('#draggableElement').dragon({

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

instance.dragonEnable();
instance.dragonDisable();

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
slider.dragonSliderGet();

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