The best jQuery UI example - drag (Draggable) Tutorial In 2024, In this tutorial you can learn The default function,Automatic scrolling,Constrained motion,Cursor Style,Delayed start,event,Handles,Restore location,Snap to Grid elements or,Visual feedback,jQuery UI Draggable + Sortable,
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) .
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 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>
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>
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>
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>
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 /en. if (! $ event_counter.hasClass ( "ui-state-hover")) { $ Event_counter.addClass ( "ui-state-hover") . .siblings () RemoveClass ( "ui-state-hover"); } // /en. 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>
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>
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>
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>
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 /en </ p> </ Div> <Div class = "ui-widget-content"> <P> /en it's z-index is automatically controlled /en </ p> </ Div> <Div class = "ui-widget-content"> <P> /en with a stack options. </ P> </ Div> </ Div> </ Body> </ Html>
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>