YouTip

# jQuery UI Example – Draggable ## Default Functionality Enable the draggable functionality on any DOM element. Move the draggable object by clicking and dragging with the mouse in the viewport. #draggable { width: 150px; height: 150px; padding: 0.5em; } $(function() { $( "#draggable" ).draggable(); }); ## Auto-Scroll Automatically scroll the document if the draggable is moved beyond the viewport. Set the `scroll` option to true to enable auto-scrolling, fine-tune when scrolling is triggered with `scrollSensitivity`, and set the scroll speed with the `scrollSpeed` option. #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } $(function() { $( "#draggable" ).draggable({ scroll: true }); $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 }); $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 }); }); ## Constrain Movement Constrain the movement of each draggable by defining boundaries for the draggable area. Set the `axis` option to restrict the draggable's path to the x or y axis, or use the `containment` option to specify a parent DOM element or a jQuery selector, such as 'document'. .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; } $(function() { $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable2" ).draggable({ axis: "x" }); $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false }); $( "#draggable5" ).draggable({ containment: "parent" }); });

Constrain movement along an axis:

Or constrain movement within another DOM element:

## Cursor Style Position the cursor while dragging the object. By default, the cursor appears in the middle of the dragged object. Use the `cursorAt` option to specify a different position relative to the draggable (specify a pixel value relative to top, right, bottom, left). Customize the cursor's appearance by providing a `cursor` option with a valid CSS cursor value. Valid CSS cursor values include: default, move, pointer, crosshair, etc. #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } $(function() { $( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } }); $( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } }); $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } }); }); ## Delay Start Set the delay in milliseconds before dragging starts with the `delay` option. Set the number of pixels the mouse must be pressed and dragged before dragging is allowed with the `distance` option. #draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } $(function() { $( "#draggable" ).draggable({ distance: 20 }); $( "#draggable2" ).draggable({ delay: 1000 }); $( ".ui-draggable" ).disableSelection(); }); ## Events The `start`, `drag`, and `stop` events on the draggable. The `start` event is triggered when dragging starts, the `drag` event is triggered during dragging, and the `stop` event is triggered when dragging stops. #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; } $(function() { var $start_counter = $( "#event-start" ), $drag_counter = $( "#event-drag" ), $stop_counter = $( "#event-stop" ), counts = [ 0, 0, 0 ]; $( "#draggable" ).draggable({ start: function() { counts++; updateCounterStatus( $start_counter, counts ); }, drag: function() { counts++; updateCounterStatus( $drag_counter, counts ); }, stop: function() { counts++; updateCounterStatus( $stop_counter, counts ); } }); function updateCounterStatus( $event_counter, new_count ) { // First update the visual state... if ( !$event_counter.hasClass( "ui-state-hover" ) ) { $event_counter.addClass( "ui-state-hover" ) .siblings().removeClass( "ui-state-hover" ); } // ...then update the number $( "span.count", $event_counter ).text( new_count ); } }); ## Handles Allow dragging only when the cursor is over a specified part of the draggable. Use the `handle` option to specify a jQuery selector for the element (or set of elements) used to drag the object. Or disallow dragging when the cursor is over a specified element (or set of elements) within the draggable. Use the `cancel` option to specify a jQuery selector for elements that cancel the draggable functionality. #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable p { cursor: move; } $(function() { $( "#draggable" ).draggable({ handle: "p" }); $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" }); $( "div, p" ).disableSelection(); }); ## Revert Position Return the draggable (or its helper) to its original position when dragging stops with the boolean `revert` option. #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } $(function() { $( "#draggable" ).draggable({ revert: true }); $( "#draggable2" ).draggable({ revert: true, helper: "clone" }); }); ## Snap To Element or Grid Snap the draggable to the inner or outer boundaries of a DOM element. Use the `snap`, `snapMode` ('inner', 'outer', 'both'), and `snapTolerance` (the distance in pixels between the draggable and the element when snapping is triggered) options. Or snap the draggable to a grid. Set the dimensions of the grid cells (height and width in pixels) with the `grid` option. .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; } $(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 ] }); });
## Visual Feedback Provide feedback to the user, such as dragging the object with a helper. The `helper` option accepts the value 'original' (moves the draggable object with the cursor), 'clone' (moves a copy of the draggable with the cursor), or a function that returns a DOM element (which is displayed near the cursor during dragging). Control the helper's transparency with the `opacity` option. To distinguish which draggable is being dragged, let the one in motion...