Fast Touch-enabled Drag And Drop Library - Dragon.js
File Size: | 10.6 KB |
---|---|
Views Total: | 1421 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.