欢迎各位兄弟 发布技术文章
这里的技术是共享的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>draggable demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="draggable">Drag me</div> <script> $( "#draggable" ).draggable(); </script> </body> </html> |
Description: Allow elements to be moved using the mouse.
Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
true
false
, will prevent the ui-draggable
class from being added. This may be desired as a performance optimization when calling .draggable()
on hundreds of elements.Initialize the draggable with the addClasses
option specified:
1 | $( ".selector" ).draggable({ addClasses: false }); |
Get or set the addClasses
option, after initialization:
1 2 3 4 5 | // getter var addClasses = $( ".selector" ).draggable( "option", "addClasses" ); // setter $( ".selector" ).draggable( "option", "addClasses", false ); |
"parent"
"parent"
will cause the helper to be a sibling of the draggable.Initialize the draggable with the appendTo
option specified:
1 | $( ".selector" ).draggable({ appendTo: "body" }); |
Get or set the appendTo
option, after initialization:
1 2 3 4 5 | // getter var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); // setter $( ".selector" ).draggable( "option", "appendTo", "body" ); |
false
"x"
, "y"
.Initialize the draggable with the axis
option specified:
1 | $( ".selector" ).draggable({ axis: "x" }); |
Get or set the axis
option, after initialization:
1 2 3 4 5 | // getter var axis = $( ".selector" ).draggable( "option", "axis" ); // setter $( ".selector" ).draggable( "option", "axis", "x" ); |
"input,textarea,button,select,option"
Initialize the draggable with the cancel
option specified:
1 | $( ".selector" ).draggable({ cancel: ".title" }); |
Get or set the cancel
option, after initialization:
1 2 3 4 5 | // getter var cancel = $( ".selector" ).draggable( "option", "cancel" ); // setter $( ".selector" ).draggable( "option", "cancel", ".title" ); |
false
helper
option must be set to "clone"
in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.Initialize the draggable with the connectToSortable
option specified:
1 | $( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); |
Get or set the connectToSortable
option, after initialization:
1 2 3 4 5 | // getter var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" ); // setter $( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" ); |
false
"parent"
, "document"
, "window"
.[ x1, y1, x2, y2 ]
.Initialize the draggable with the containment
option specified:
1 | $( ".selector" ).draggable({ containment: "parent" }); |
Get or set the containment
option, after initialization:
1 2 3 4 5 | // getter var containment = $( ".selector" ).draggable( "option", "containment" ); // setter $( ".selector" ).draggable( "option", "containment", "parent" ); |
"auto"
Initialize the draggable with the cursor
option specified:
1 | $( ".selector" ).draggable({ cursor: "crosshair" }); |
Get or set the cursor
option, after initialization:
1 2 3 4 5 | // getter var cursor = $( ".selector" ).draggable( "option", "cursor" ); // setter $( ".selector" ).draggable( "option", "cursor", "crosshair" ); |
false
{ top, left, right, bottom }
.Initialize the draggable with the cursorAt
option specified:
1 | $( ".selector" ).draggable({ cursorAt: { left: 5 } }); |
Get or set the cursorAt
option, after initialization:
1 2 3 4 5 | // getter var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); // setter $( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); |
0
Initialize the draggable with the delay
option specified:
1 | $( ".selector" ).draggable({ delay: 300 }); |
Get or set the delay
option, after initialization:
1 2 3 4 5 | // getter var delay = $( ".selector" ).draggable( "option", "delay" ); // setter $( ".selector" ).draggable( "option", "delay", 300 ); |
false
true
.Initialize the draggable with the disabled
option specified:
1 | $( ".selector" ).draggable({ disabled: true }); |
Get or set the disabled
option, after initialization:
1 2 3 4 5 | // getter var disabled = $( ".selector" ).draggable( "option", "disabled" ); // setter $( ".selector" ).draggable( "option", "disabled", true ); |
1
Initialize the draggable with the distance
option specified:
1 | $( ".selector" ).draggable({ distance: 10 }); |
Get or set the distance
option, after initialization:
1 2 3 4 5 | // getter var distance = $( ".selector" ).draggable( "option", "distance" ); // setter $( ".selector" ).draggable( "option", "distance", 10 ); |
false
[ x, y ]
.Initialize the draggable with the grid
option specified:
1 | $( ".selector" ).draggable({ grid: [ 50, 20 ] }); |
Get or set the grid
option, after initialization:
1 2 3 4 5 | // getter var grid = $( ".selector" ).draggable( "option", "grid" ); // setter $( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); |
false
Initialize the draggable with the handle
option specified:
1 | $( ".selector" ).draggable({ handle: "h2" }); |
Get or set the handle
option, after initialization:
1 2 3 4 5 | // getter var handle = $( ".selector" ).draggable( "option", "handle" ); // setter $( ".selector" ).draggable( "option", "handle", "h2" ); |
"original"
"clone"
, then the element will be cloned and the clone will be dragged.Initialize the draggable with the helper
option specified:
1 | $( ".selector" ).draggable({ helper: "clone" }); |
Get or set the helper
option, after initialization:
1 2 3 4 5 | // getter var helper = $( ".selector" ).draggable( "option", "helper" ); // setter $( ".selector" ).draggable( "option", "helper", "clone" ); |
false
cursorAt
option, or in any case where the mouse cursor may not be over the helper.true
, transparent overlays will be placed over all iframes on the page.Initialize the draggable with the iframeFix
option specified:
1 | $( ".selector" ).draggable({ iframeFix: true }); |
Get or set the iframeFix
option, after initialization:
1 2 3 4 5 | // getter var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ); // setter $( ".selector" ).draggable( "option", "iframeFix", true ); |
false
Initialize the draggable with the opacity
option specified:
1 | $( ".selector" ).draggable({ opacity: 0.35 }); |
Get or set the opacity
option, after initialization:
1 2 3 4 5 | // getter var opacity = $( ".selector" ).draggable( "option", "opacity" ); // setter $( ".selector" ).draggable( "option", "opacity", 0.35 ); |
false
true
, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.Initialize the draggable with the refreshPositions
option specified:
1 | $( ".selector" ).draggable({ refreshPositions: true }); |
Get or set the refreshPositions
option, after initialization:
1 2 3 4 5 | // getter var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" ); // setter $( ".selector" ).draggable( "option", "refreshPositions", true ); |
false
true
the element will always revert."invalid"
, revert will only occur if the draggable has not been dropped on a droppable. For "valid"
, it's the other way around.true
to revert the element.Initialize the draggable with the revert
option specified:
1 | $( ".selector" ).draggable({ revert: true }); |
Get or set the revert
option, after initialization:
1 2 3 4 5 | // getter var revert = $( ".selector" ).draggable( "option", "revert" ); // setter $( ".selector" ).draggable( "option", "revert", true ); |
500
revert
option is false
.Initialize the draggable with the revertDuration
option specified:
1 | $( ".selector" ).draggable({ revertDuration: 200 }); |
Get or set the revertDuration
option, after initialization:
1 2 3 4 5 | // getter var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" ); // setter $( ".selector" ).draggable( "option", "revertDuration", 200 ); |
"default"
accept
option. A draggable with the same scope
value as a droppable will be accepted by the droppable.Initialize the draggable with the scope
option specified:
1 | $( ".selector" ).draggable({ scope: "tasks" }); |
Get or set the scope
option, after initialization:
1 2 3 4 5 | // getter var scope = $( ".selector" ).draggable( "option", "scope" ); // setter $( ".selector" ).draggable( "option", "scope", "tasks" ); |
true
true
, container auto-scrolls while dragging.Initialize the draggable with the scroll
option specified:
1 | $( ".selector" ).draggable({ scroll: false }); |
Get or set the scroll
option, after initialization:
1 2 3 4 5 | // getter var scroll = $( ".selector" ).draggable( "option", "scroll" ); // setter $( ".selector" ).draggable( "option", "scroll", false ); |
20
scroll
option is false
.Initialize the draggable with the scrollSensitivity
option specified:
1 | $( ".selector" ).draggable({ scrollSensitivity: 100 }); |
Get or set the scrollSensitivity
option, after initialization:
1 2 3 4 5 | // getter var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" ); // setter $( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); |
20
scrollSensitivity
distance. Ignored if the scroll
option is false
.Initialize the draggable with the scrollSpeed
option specified:
1 | $( ".selector" ).draggable({ scrollSpeed: 100 }); |
Get or set the scrollSpeed
option, after initialization:
1 2 3 4 5 | // getter var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" ); // setter $( ".selector" ).draggable( "option", "scrollSpeed", 100 ); |
false
true
, the element will snap to all other draggable elements.Initialize the draggable with the snap
option specified:
1 | $( ".selector" ).draggable({ snap: true }); |
Get or set the snap
option, after initialization:
1 2 3 4 5 | // getter var snap = $( ".selector" ).draggable( "option", "snap" ); // setter $( ".selector" ).draggable( "option", "snap", true ); |
"both"
snap
option is false
. Possible values: "inner"
, "outer"
, "both"
.Initialize the draggable with the snapMode
option specified:
1 | $( ".selector" ).draggable({ snapMode: "inner" }); |
Get or set the snapMode
option, after initialization:
1 2 3 4 5 | // getter var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); // setter $( ".selector" ).draggable( "option", "snapMode", "inner" ); |
20
snap
option is false
.Initialize the draggable with the snapTolerance
option specified:
1 | $( ".selector" ).draggable({ snapTolerance: 30 }); |
Get or set the snapTolerance
option, after initialization:
1 2 3 4 5 | // getter var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" ); // setter $( ".selector" ).draggable( "option", "snapTolerance", 30 ); |
false
Initialize the draggable with the stack
option specified:
1 | $( ".selector" ).draggable({ stack: ".products" }); |
Get or set the stack
option, after initialization:
1 2 3 4 5 | // getter var stack = $( ".selector" ).draggable( "option", "stack" ); // setter $( ".selector" ).draggable( "option", "stack", ".products" ); |
false
Initialize the draggable with the zIndex
option specified:
1 | $( ".selector" ).draggable({ zIndex: 100 }); |
Get or set the zIndex
option, after initialization:
1 2 3 4 5 | // getter var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); // setter $( ".selector" ).draggable( "option", "zIndex", 100 ); |
Invoke the destroy method:
1 | $( ".selector" ).draggable( "destroy" ); |
Invoke the disable method:
1 | $( ".selector" ).draggable( "disable" ); |
Invoke the enable method:
1 | $( ".selector" ).draggable( "enable" ); |
optionName
.Invoke the method:
1 | var isDisabled = $( ".selector" ).draggable( "option", "disabled" ); |
Invoke the method:
1 | var options = $( ".selector" ).draggable( "option" ); |
optionName
.Invoke the method:
1 | $( ".selector" ).draggable( "option", "disabled", true ); |
Invoke the method:
1 | $( ".selector" ).draggable( "option", { disabled: true } ); |
jQuery
object containing the draggable element.Invoke the widget method:
1 | var widget = $( ".selector" ).draggable( "widget" ); |
dragcreate
Note: The ui
object is empty but included for consistency with other events.
Initialize the draggable with the create callback specified:
1 2 3 | $( ".selector" ).draggable({ create: function( event, ui ) {} }); |
Bind an event listener to the dragcreate event:
1 | $( ".selector" ).on( "dragcreate", function( event, ui ) {} ); |
drag
Initialize the draggable with the drag callback specified:
1 2 3 | $( ".selector" ).draggable({ drag: function( event, ui ) {} }); |
Bind an event listener to the drag event:
1 | $( ".selector" ).on( "drag", function( event, ui ) {} ); |
dragstart
Initialize the draggable with the start callback specified:
1 2 3 | $( ".selector" ).draggable({ start: function( event, ui ) {} }); |
Bind an event listener to the dragstart event:
1 | $( ".selector" ).on( "dragstart", function( event, ui ) {} ); |
dragstop
Initialize the draggable with the stop callback specified:
1 2 3 | $( ".selector" ).draggable({ stop: function( event, ui ) {} }); |
Bind an event listener to the dragstop event:
1 | $( ".selector" ).on( "dragstop", function( event, ui ) {} ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>draggable demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="draggable">Drag me</div> <script> $( "#draggable" ).draggable(); </script> </body> </html> |