The JQueryUIDraggable plug-in allows you to drag selected elements with the mouse. the element of Draggable is affected by css: ui-draggable. css: ui-draggable-dragging during the drag process. if you need a complete drag-and-drop function, see the Droppable plug-in of JQueryUI.
The JQuery UI Draggable plugin enables you to drag selected elements with the mouse.
The element of Draggable is affected by css: ui-draggable. css: ui-draggable-dragging during the drag process.
If you need not only drag but a complete drag-and-drop function, see the Droppable plug-in JQuery UI. This plug-in provides a draggable target.
All callback functions (events such as start, stop, and drag) accept two parameters:
Event: browser native event
Ui: A JQuery ui object, which has the following attributes:
Ui. helper: The JQuery packaging object of the elements being dragged. ui. helper. context can get the native DOM element.
Ui. position: ui. the offset of helper (that is, the element we want to drag) relative to the parent element (containing its own elements, if it is the top layer, corresponding to the body), the value is an object {top, left} ---- You can use the ui. position. top obtains the current offset between this element and the parent element's top.
Ui. offset: With the ui. position agrees, which indicates the offset between it and the upper-left boundary of the browser content area (note that it is the content area, not the html body area. by default, the html body is offset relative to the offset in various browsers .)
[Option]
AddClasses:
[Type] Boolean (Boolean value)
[Default value] true
[Impact]
Used to set whether to decorate the draggable element through the ui-draggable style. mainly to pass. when draggable () initializes many (hundreds of) elements, the optimization performance is considered. However, the setting of this option does not affect the ui-draggable-dragging style to change the style of the drag process.
True indicates that the ui-draggable style is added to this element.
False indicates that the ui-draggable style is not added to this element.
[Code example] initialize other options of draggable to obtain the property value. Except for the special functions, this function is not described in detail. Only the code is pasted.
[Initialization]
$ ('. Selector'). draggable ({addClasses: false });
Render the selected element of the. selector into a Drag Control without adding the ui-draggable style.
[Retrieve attribute values]
Var addClasses = $ ('# draggable'). draggable ('option', 'addclass ');
Obtain the value of the addClasses option of the Drag Control selected by the selector.
[Set attribute values]
$ ('. Selector'). draggable ('option', 'addclasss', false );
Set the addClasses option value of the Drag Control selected by the. selector to false.
AppendTo:
[Type] Element, Selector (HTML Element Object or Selector)
[Default value] 'parent' parent Element
[Impact]
It is used to specify the ui. helper container when the control is dragged. By default, ui. helper uses the same container as the initially defined draggable, that is, its parent element.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({appendTo: 'body '});
[Retrieve attribute values]
// Getter
Var appendTo = $ ('. selector'). draggable ('option', 'appendto ');
[Set attribute values]
// Setter
$ ('. Selector'). draggable ('option', 'appendto', 'body ');.
Axis:
[Type] String, Boolean (optional values include 'x', 'y', and false)
'X': horizontal drag only
'Y': vertical drag only
False: It can be horizontal or vertical.
[Default value] false, no restriction on the direction of the drag
[Impact]
Orientation in the Process of dragging constraints.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({axis: 'X '});
[Retrieve attribute values]
Var axis = $ ('. selector'). draggable ('option', 'axis ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'axis ', 'x ');
Cancel:
[Type] Selector
[Default value] ': input, option'
[Impact]
You can specify this type of element through the selector and cannot render it as a draggable control.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({cancel: 'click '});
[Retrieve attribute values]
Var cancel = $ ('. selector'). draggable ('option', 'cancel ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'cancel', 'click ');
ConnectToSortable: This option needs to work with sortable for further discussion.
[Type] Selector
[Default value] ': input, option'
[Impact]
You can specify this type of element through the selector and cannot render it as a draggable control.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({cancel: 'click '});
[Retrieve attribute values]
Var cancel = $ ('. selector'). draggable ('option', 'cancel ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'cancel', 'click ');
Containment:
[Type] selector, element, String, array.
Selector: You can only drag within the element restricted by the selector.
Element: You can only drag within a given element.
String:
Parent: can only be dragged in the parent container
Document: you can drag the document of the current html document. when the document is out of the browser window range, the scroll bar is automatically displayed.
Widow: it can only be dragged in the content area of the current browser window. Dragging is beyond the current window range and will not cause a scroll bar...
Array: [x1, y1, x2, y2] uses [start horizontal coordinate, start vertical coordinate, end horizontal coordinate, end vertical coordinate] to define an area, you can only drag in this area. in this way, the value is the offset value relative to the upper left corner of the content area of the current browser window.
False: do not limit the range of the drag Activity
[Default value] false
[Impact]
Affects the active area of the specified Drag Control.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({containment: 'parent '});
[Retrieve attribute values]
Var containment = $ ('. selector'). draggable ('option', 'containing ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'containing', 'parent ');
Cursor:
[Type] string.
[Default value] 'auto'
[Impact]
Affects the mouse style of the specified Drag Control. After the style is set, the original elements of the control must support the specified cursor style. If the original element of the specified value is not supported, use the default cursor style of the original element. for example, $ ('input [type = button] '). draggable ({cursor: 'crosshair'}); because the button does not support the crosshair mouse style, it is displayed in the default format.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({cursor: 'crosshair '});
[Retrieve attribute values]
Var cursor = $ ('. selector'). draggable ('option', 'cursor ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'cursor ', 'crosshair ');
CursorAt:
[Type] Object
You can set one or two attribute values of the top, left, right, and bottom object to determine the position.
[Default value] false
[Impact]
When dragging a control, the cursor is displayed on the control. When the value is false (default), where to start dragging, and where to move the cursor, if it is set, it will be at the offset position relative to the upper left corner of the control, for example: $ ('. selector '). draggable ('option', 'cursorat', {left: 8, top: 8, the cursor is shifted to the right at 8 pixels in the upper left corner.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({cursor: 'crosshair '});
[Retrieve attribute values]
Var cursor = $ ('. selector'). draggable ('option', 'cursor ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'cursor ', 'crosshair ');
Delay:
[Type] integer, in milliseconds
[Default value] 0
[Impact]
You can drag the control from the left mouse click to the drag effect of the delay. this option can be used to prevent invalid drag caused by unexpected clicks. the specific effect is: one drag, from the left mouse button to the time specified by delay, if the left mouse button has not been released, it is considered that this drag is valid, otherwise, it is considered that this drag is invalid.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({delay: 500 });
[Retrieve attribute values]
Var delay = $ ('. selector'). draggable ('option', 'delay ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'delay', 500 );
Distance:
[Type] integer in pixels
[Default value] 1
[Impact]
You can drag the control from the left mouse click to the drag effect generated when the mouse must be generated shift. this option can be used to prevent invalid drag caused by unexpected clicks. the specific effect is: one drag, left click from the mouse, only when the displacement generated by the mouse reaches the value specified by distance, it is considered to be a valid drag.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({distance: 30 });
[Retrieve attribute values]
Var distance = $ ('. selector'). draggable ('option', 'distance ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'distance ', 30 );
Grid:
[Type] array [x, y], x indicates horizontal size, y indicates vertical size, in pixels
[Default value] false
[Impact]
You can drag the control to the grid. That is to say, the Unit during the drag is the size of the grid described by the array specified by the guid option.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({grid: [50, 20]});
[Retrieve attribute values]
Var grid = $ ('. selector'). draggable ('option', 'grid ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'grid', []);
Handle:
[Type] selector or element
[Default value] false
[Impact]
Specifies the element that triggers the drag. usage: Set a div with id = window as a Drag Control and set handle to a span with id = title in the div, it is valid only when you click and drag on the span with id = title. note: This element must be a child element that can be dragged to the control.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({handle: 'h2 '});
[Retrieve attribute values]
Var handle = $ ('. selector'). draggable ('option', 'handle ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'handle', 'h2 ');
Helper:
[Type] string or function
String Value:
'Original': You can drag the control to move it.
'Clone ': clone and move the Drag Control, and keep the original position unchanged.
The function must return a DOM element: Move the returned DOM element to show the drag process.
[Default value] 'original'
[Impact]
The drag operation helps you know the elements of the current drag position.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({helper: 'clone '});
[Retrieve attribute values]
Var helper = $ ('. selector'). draggable ('option', 'helper ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'helper ', 'clone ');
IframeFix:
[Type] Boolean value or selector. The selection result of the selector must be an iframe element.
[Default value] false
[Impact]
This prevents the iframe from responding to the mouse movement event by default because the mouse pointer moves in the iframe area during the drag process.
If it is set to true, all iframe mousemove events on the current page will be blocked during the dragging process. If it is set to a selector, the specified iframe mousemove event will be blocked.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({iframeFix: true });
[Retrieve attribute values]
Var iframeFix = $ ('. selector'). draggable ('option', 'iframefix ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'iframefix', true );
Opacity:
[Type] floating point value
[Default value] false
[Impact]
The opacity of the helper control that follows the mouse when dragging.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({opacity: 0.35 });
[Retrieve attribute values]
Var opacity = $ ('. selector'). draggable ('option', 'opacity ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'opacity ', 0.35 );
RefreshPositions:
[Type] Boolean
[Default value] false
[Impact]
If it is set to true, all droppable locations are calculated in each mousemove event.
Note: This option is mainly used to solve the problem of advanced dynamic page display. Use it with caution.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({refreshPositions: true });
[Retrieve attribute values]
Var refreshPositions = $ ('. selector'). draggable ('option', 'refreshpositions ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'refreshpositions ', true );
Revert:
[Type] Boolean, string
[Default value] false
[Impact]
Determines whether to return to the original position after a drag.
True: after each drag is stopped, the element automatically returns to its original position.
'Invalid': the element is not returned to the original position unless it is a droppable and successfully dropped.
'Valid': Except for invalid.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({revert: true });
[Retrieve attribute values]
Var revert = $ ('. selector'). draggable ('option', 'revert ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'revert', true );
RevertDuration:
[Type] integer
[Default value] 500
[Impact]
The time required for the revert process, in milliseconds. If the revert option is set to false, this attribute is ignored.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({revertDuration: 1000 });
[Retrieve attribute values]
Var revertDuration = $ ('. selector'). draggable ('option', 'revertduration ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'revertduration', 1000 );
Scope:
[Type] string
[Default] 'default'
[Impact]
This option describes a range and is used in combination with the droppable option of the same name. The droppable accept option is used to set the acceptable draggable control. At the same time, the acceptable drggable control is restricted by the scope option, only draggable and droppable in the same scope can be dragged and dropped.
For example:
$ ('# Draggable_a'). draggable ({scope: 'A '});
$ ('# Draggable_ B'). draggable ({scope: 'B '});
$ ('# Droppable_a'). droppable ({scope: 'A '});
$ ('# Droppable_ B'). droppable ({scope: 'B '});
The default accept Option of the droppable control is '*'. It seems that draggable_a and draggable_ B can be freely put into droppable_a and droppable_ B. However, due to scope constraints, draggable_a can only be placed in droppable_a, draggable_ B can only be sent to droppable_ B.
Note: This option is similar to that of the variable namespace. The default value is 'default'. If this parameter is not specified, all users still have scope and the name is default.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({scope: 'task '});
[Retrieve attribute values]
Var scope = $ ('. selector'). draggable ('option', 'scope ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'scope ', 'task ');
Scroll:
[Type] Boolean
[Default value] true
[Impact]
If this parameter is set to true, the scroll bar is automatically added to the container when the container of the control can be dragged is exceeded.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({scroll: false });
[Retrieve attribute values]
Var scope = $ ('. selector'). draggable ('option', 'scope ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'scroll ', false );
Scrollsensiti.pdf:
[Type] integer
[Default value] 20
[Impact]
The sensitivity of the scroll bar.
The following cursor refers to the position of the mouse when the draggable control moves.
The scroll bar starts to scroll when the distance between the mouse pointer and the side of the container where the draggable control is located.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({scrollsensiti.pdf: 40 });
[Retrieve attribute values]
Var scrollsensiti.pdf = $ ('. selector'). draggable ('option', 'scrollsensitification ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'scrollsensitification', 40 );
ScrollSpeed:
[Type] integer
[Default value] 20
[Impact]
The number of pixels that the scroll bar rolls at a time when scrollSensitivity occurs.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({scrollSpeed: 40 });
[Retrieve attribute values]
Var scrollSpeed = $ ('. selector'). draggable ('option', 'scrollspeed ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'scrollspeed', 40 );
Snap:
[Type] Boolean, Selector
[Default value] false
[Impact]
The adsorption function is set to true, which is equivalent to setting the selector. ui-draggable: the specific effect is on all elements specified by the selector. The current draggable control can achieve the adsorption function. The adsorption means that the components that are close to each other are not moved to the target component, automatically suck the components being dragged.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({snap: true });
[Retrieve attribute values]
Var snap = $ ('. selector'). draggable ('option', 'snap ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'snap ', true );
SnapMode:
[Type] string; optional values:
'Inner ': adsorption can be performed on specified elements.
'Outer': adsorption outside the specified Element
'Both ': It can be adsorbed on the outside.
[Default value] 'both'
[Impact]
Set the adsorption mode.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({snapMode: 'outer '});
[Retrieve attribute values]
Var snapMode = $ ('. selector'). draggable ('option', 'snapmode ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'snapmode', 'outer ');
SnapTolerance:
[Type] integer
[Default value] 20
[Impact]
Adsorption is performed when the number of pixels from the target object's edge is set.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({snap: true });
[Retrieve attribute values]
Var snap = $ ('. selector'). draggable ('option', 'snap ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'snap ', true );
Stack:
[Type] object {group: '. selector', min: 50}
[Default value] false
[Impact]
When initializing a group of draggable controls, some of the draggable controls are selected as a group with a given selector, this group of draggable controls can achieve the always-before-last effect of the current drag, min is used to specify the minimum value of the z-index value of this group.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({stack: {group: 'products', min: 50 }});
[Retrieve attribute values]
Var stack = $ ('. selector'). draggable ('option', 'stack ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'stack', {group: 'products', min: 50 });
ZIndex:
[Type] integer
[Default value] false
[Impact]
The z-index value of the helper (control that follows the mouse movement) when dragging. z-index is the number of layers in css. The larger the value, the more on the upper layer.
[Sample Code]
[Initialization]
$ ('. Selector'). draggable ({zIndex: 2700 });
[Retrieve attribute values]
Var zIndex = $ ('. selector'). draggable ('option', 'zindex ');
[Set attribute values]
$ ('. Selector'). draggable ('option', 'zindex', 2700 );
[Events]
Start: drag to start. Press the mouse to start moving.
[Type] dragstart
[Parameters accepted by the callback function]
Event: A Native browser event.
Ui: JQuery ui object
This: The currently dragged control DOM object.
Drag: move the mouse while dragging.
[Type] drag
[Parameters accepted by the callback function]
Event: A Native browser event.
Ui: JQuery ui object
This: The currently dragged control DOM object.
Stop: drag to end.
[Type] dragstop
[Parameters accepted by the callback function]
Event: A Native browser event.
Ui: JQuery ui object
This: The currently dragged control DOM object.
[Sample Code]
Set events during initialization.
$ ('. Selector'). draggable ({
Start: function (event, ui) {alert (this );},
Drag: function (event, ui) {alert (this );},
Stop: function (event, ui) {alert (this );}
});
Dynamic event binding. The event name used for dynamic binding is the event type.
$ (". Selector"). bind ('dragstart', function (event, ui ){
Alert (this );
});
$ (". Selector"). bind ('drag', function (event, ui ){
Alert (this );
});
$ (". Selector"). bind ('dragstop', function (event, ui ){
Alert (this );
});
[Method]
Destroy: completely removes a Drag Control and returns it to the state before the element is initialized as a drag control.
[Sample Code]
$ (". Selector"). progressbar ('deststroy ');
Destroys the previously initialized Drag Control specified by. selector so that it returns the status before initialization.
Disable: change the style of the Drag Control to invalid, which corresponds to enable.
Enable: change the style of the Drag Control to allow, which corresponds to disable.
Option: gets or sets the option of the drag control. The second parameter is the option name, and the third parameter is the value. If no value is specified, it is obtained. The specified value is the setting.
[Summary]
AddClasses: Used to set whether to add the ui-draggable style.
AppendTo: Set the append location
Axis: set the direction of the drag
Cancel, handle: Set to control the entire control drag action area, cancel specified area cannot be dragged, handle specified area control Control drag.
ConnectToSortable: It must be integrated with sortable.
Containment: sets the drag range of the control.
Cursor and cursorAt: Set the mouse style and the position of the relative space during the dragging process.
Delay, distance: sets the drag delay, delay sets the delay time, and distance sets the delay distance to prevent unwanted drag caused by incorrect clicks.
Grid: Set the unit to move during the drag process (move in small cells)
Helper: Set the widget that follows the mouse when dragging.
IframeFix: Solves the issue of events that are stacked with iframe during the drag process.
Opacity: the opacity of helper during dragging.
RefreshPositions: The position is calculated every time the mouse moves during the drop process.
Revert, revertDuration: Set to undo mobile.
Scope: Set the draggable domain and use it with droppable to determine the targets that can be placed.
Scroll, scrollsensitispeed, scrollSpeed: sets the problems related to the scroll bar during the dragging process.
Snap, snapMode, and snapTolerance: Set the adsorption attributes.
Stack and zIndex: Set the control hierarchy.
