jQuery UI example - drag (Draggable)
Allowing the mouse to move the element.
For more details about the draggable interaction, see the API documentation can drag and drop widgets (the Draggable the Widget) .
The default function
Enable draggable feature on any DOM element. By clicking and dragging the mouse in the viewport to move the draggable object.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable {width: 150px; height: 150px; padding: 0.5em;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ();
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> Please drag me! </ P>
</ Div>
</ Body>
</ Html>
Automatic scrolling
Automatic scrolling through the document when the draggable moved outside the viewport. Set the scroll option to true to enable automatic scrolling, fine-tuning, the scrolling speed when scrolling through the trigger scrollSensitivity and scrollSpeed setting options.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Automatic scrolling </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Scroll: true});
$ ( "# Draggable2") .draggable ({scroll: true, scrollSensitivity: 100});
$ ( "# Draggable3") .draggable ({scroll: true, scrollSpeed: 100});
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> Scroll is set to true, the default setting </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> scrollSensitivity to 100 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> scrollSpeed to 100 </ p>
</ Div>
<Div style = "height: 5000px; width: 1px;"> </ div>
</ Body>
</ Html>
Constrained motion
Draggable area defined by the boundary to constrain the movement of each draggable. Set axis options to limit draggable path for the x-axis or y-axis, or containment option to specify a parent DOM element or a jQuery selector, such as 'document.'.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - constrained motion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.draggable {width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2 {margin-bottom: 20px;}
#draggable {cursor: n-resize;}
# Draggable2 {cursor: e-resize;}
# Containment-wrapper {width: 95%; height: 150px; border: 2px solid #ccc; padding: 10px;}
h3 {clear: left;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Axis: "y"});
$ ( "# Draggable2") .draggable ({axis: "x"});
$ ( "# Draggable3") .draggable ({containment: "# containment-wrapper", scroll: false});
$ ( "# Draggable5") .draggable ({containment: "parent"});
});
</ Script>
</ Head>
<Body>
<H3> motion along the axis constraint: </ h3>
<Div id = "draggable" class = "draggable ui-widget-content">
<P> Only vertical drag </ p>
</ Div>
<Div id = "draggable2" class = "draggable ui-widget-content">
<P> Only horizontal drag </ p>
</ Div>
<H3> or constrained motion in another DOM element: </ h3>
<Div id = "containment-wrapper">
<Div id = "draggable3" class = "draggable ui-widget-content">
<P> I was constrained in a box </ p>
</ Div>
<Div class = "draggable ui-widget-content">
<P id = "draggable5" class = "ui-widget-header"> I was confined within the parent element </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Cursor Style
When dragging the object to position the cursor. By default, the cursor is in the middle dragged object. Use cursorAt option to specify the position relative to the other (specified with respect to a pixel value top, right, bottom, left of) draggable's. By providing a valid CSS cursor value with the cursor options to customize the appearance of the cursor. Valid CSS cursor values include: default, move, pointer, crosshair, and so on.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Cursor Style </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2, # draggable3 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Cursor: "move", cursorAt: {top: 56, left: 56}});
$ ( "# Draggable2") .draggable ({cursor: "crosshair", cursorAt: {top: -5, left: -5}});
$ ( "# Draggable3") .draggable ({cursorAt: {bottom: 0}});
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> I'm always in the middle (with respect to the mouse) </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> My cursor is left -5 and top -5 </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> My only control the cursor position 'bottom' values </ p>
</ Div>
</ Body>
</ Html>
Delayed start
By delay delay milliseconds start dragging option settings. By distance option is pressed and drag the cursor to the specified pixel before allowing drag and drop.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - delayed start </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2 {width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Distance: 20});
$ ( "# Draggable2") .draggable ({delay: 1000});
$ ( ".ui-Draggable") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> Only when I drag a 20 pixel, and began to drag </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
After <p> No matter how much distance you have to drag and drag began to wait for 1000ms </ p>
</ Div>
</ Body>
</ Html>
event
draggable on start , drag and stop events. Dragging the start trigger start event, triggered during drag drag event, triggered when the drag stop stop event.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Events </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable {width: 16em; padding: 0 1em;}
#draggable ul li {margin: 1em 0; padding: 0.5em 0;} * html #draggable ul li {height: 1%;}
#draggable ul li span.ui-icon {float: left;}
#draggable ul li span.count {font-weight: bold;}
</ Style>
<Script>
$ (Function () {
var $ start_counter = $ ( "# event-start"),
$ Drag_counter = $ ( "# event-drag"),
$ Stop_counter = $ ( "# event-stop"),
counts = [0, 0, 0];
$ ( "#draggable") .draggable ({
start: function () {
counts [0] ++;
updateCounterStatus ($ start_counter, counts [0]);
},
drag: function () {
counts [1] ++;
updateCounterStatus ($ drag_counter, counts [1]);
},
stop: function () {
counts [2] ++;
updateCounterStatus ($ stop_counter, counts [2]);
}
});
function updateCounterStatus ($ event_counter, new_count) {
// Updated first visual state ...
if (! $ event_counter.hasClass ( "ui-state-hover")) {
$ Event_counter.addClass ( "ui-state-hover")
. .siblings () RemoveClass ( "ui-state-hover");
}
// ... Then update numbers $ ( "span.count", $ event_counter) .text (new_count);
}
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget ui-widget-content">
<P> Please drag me, triggering a chain of events. </ P>
<Ul class = "ui-helper-reset">
<Li id = "event-start" class = "ui-state-default ui-corner-all"> <span class = "ui-icon ui-icon-play"> </ span> "start" is called <span class = "count"> 0 </ span> x </ li>
<Li id = "event-drag" class = "ui-state-default ui-corner-all"> <span class = "ui-icon ui-icon-arrow-4"> </ span> "drag" is called <span class = "count"> 0 </ span> x </ li>
<Li id = "event-stop" class = "ui-state-default ui-corner-all"> <span class = "ui-icon ui-icon-stop"> </ span> "stop" is called <span class = "count"> 0 </ span> x </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
Handles
Is permitted only when the cursor part specified drag on draggable. Use handle option to specify the element (or group of elements) of the jQuery selector for the dragged object.
Or when the cursor specified element (or group of elements) within the allowed drag draggable. Use handle option to specify cancel the drag function jQuery selector.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Handles </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable p {cursor: move;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Handle: "p"});
$ ( "# Draggable2") .draggable ({cancel: "p.ui-widget-header"});
$ ( "Div, p") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P class = "ui-widget-header"> You can only drag and drop within this range I </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> You can take me around to drag & hellip; </ p>
<P class = "ui-widget-header"> & hellip; but you can not drag me </ p> In this range
</ Div>
</ Body>
</ Html>
Restore location
As with Boolean values revert when draggable option to stop dragging, return draggable (or its assistant) to the original location.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Restore Location </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2 {width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Revert: true});
$ ( "# Draggable2") .draggable ({revert: true, helper: "clone"});
});
</ Script>
</ Head>
<Body>
<Div id = "draggable" class = "ui-widget-content">
<P> Restore </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> Restore Assistant </ p>
</ Div>
</ Body>
</ Html>
Snap to Grid elements or
Align draggable internal or external borders DOM elements. The use of snap , snapMode (Inner, Outer, both) and snapTolerance (when calling aligned with draggable distance between elements in pixels) option.
Align to Grid or draggable. By grid size option to set the grid cells (pixels height or width).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - Align to Grid elements or </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.draggable {width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em;}
.ui-widget-header p, .ui-widget-content p {margin: 0;}
#snaptarget {height: 140px;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Snap: true});
$ ( "# Draggable2") .draggable ({snap: ".ui-widget-header"});
$ ( "# Draggable3") .draggable ({snap: ".ui-widget-header", snapMode: "outer"});
$ ( "# Draggable4") .draggable ({grid: [20, 20]});
$ ( "# Draggable5") .draggable ({grid: [80, 80]});
});
</ Script>
</ Head>
<Body>
<Div id = "snaptarget" class = "ui-widget-header">
<P> I am a goal-aligned </ p>
</ Div>
<br style="clear:both">
<Div id = "draggable" class = "draggable ui-widget-content">
<P> Default (snap: true), aligned to all other draggable element </ p>
</ Div>
<Div id = "draggable2" class = "draggable ui-widget-content">
<P> I just aligned to the big box </ p>
</ Div>
<Div id = "draggable3" class = "draggable ui-widget-content">
<P> I just aligned to the outer edge of the big box </ p>
</ Div>
<Div id = "draggable4" class = "draggable ui-widget-content">
<P> I aligned to a 20 x 20 grid </ p>
</ Div>
<Div id = "draggable5" class = "draggable ui-widget-content">
<P> I aligned to a 80 x 80 grid </ p>
</ Div>
</ Body>
</ Html>
Visual feedback
Provide feedback to the user, as assistant to the way dragged objects. helper option accepts values 'original' (with the cursor draggable objects), 'clone' (with the cursor draggable copy), or a function returns the DOM element (the element during a drag the cursor around the display). By opacity option controls transparency assistant.
To distinguish which is a draggable is dragged, let draggable in motion to keep the front. If you are dragging, using zIndex option to set the height of the assistant z-index, or use the stack option to ensure that when you stop dragging, the last one being dragged item always appears on top of the group with other projects.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) - visual feedback </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#draggable, # draggable2, # draggable3, #set div {width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0;}
#draggable, # draggable2, # draggable3 {margin-bottom: 20px;}
#set {clear: both; float: left; width: 368px; height: 120px;}
p {clear: both; margin: 0; padding: 1em 0;}
</ Style>
<Script>
$ (Function () {
$ ( "#draggable") .draggable ({Helper: "original"});
$ ( "# Draggable2") .draggable ({opacity: 0.7, helper: "clone"});
$ ( "# Draggable3") .draggable ({
cursor: "move",
cursorAt: {top: -12, left: -20},
helper: function (event) {
return $ ( "<div class = 'ui-widget-header'> I'm a custom helper </ div>");
}
});
$ ( "#set Div") .draggable ({stack: "#set div"});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> helper: </ h3>
<Div id = "draggable" class = "ui-widget-content">
<P> original </ p>
</ Div>
<Div id = "draggable2" class = "ui-widget-content">
<P> translucent clone </ p>
</ Div>
<Div id = "draggable3" class = "ui-widget-content">
<P> Custom assistant (in conjunction with cursorAt) </ p>
</ Div>
<H3 class = "docs"> stack: </ h3>
<Div id = "set">
<Div class = "ui-widget-content">
<P> We are draggables .. </ p>
</ Div>
<Div class = "ui-widget-content">
<P> .. it's z-index is automatically controlled .. </ p>
</ Div>
<Div class = "ui-widget-content">
<P> .. with a stack options. </ P>
</ Div>
</ Div>
</ Body>
</ Html>
jQuery UI Draggable + Sortable
Draggable and Sortable of seamless interaction.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI drag (Draggable) + Sort (Sortable) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
ul {list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;}
li {margin: 5px; padding: 5px; width: 150px;}
</ Style>
<Script>
$ (Function () {
$ ( "#sortable") .sortable ({
revert: true
});
$ ( "#draggable") .draggable ({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$ ( "Ul, li") .disableSelection ();
});
</ Script>
</ Head>
<Body>
<Ul>
<Li id = "draggable" class = "ui-state-highlight"> Please drag me </ li>
</ Ul>
<Ul id = "sortable">
<Li class = "ui-state-default"> Item 1 </ li>
<Li class = "ui-state-default"> Item 2 </ li>
<Li class = "ui-state-default"> Item 3 </ li>
<Li class = "ui-state-default"> Item 4 </ li>
<Li class = "ui-state-default"> Item 5 </ li>
</ Ul>
</ Body>
</ Html>