Jquery.ui.draggable Chinese document (original translation) _jquery

[Original translation]
The JQuery UI draggable plug-in is used to make the selected element drag through the mouse.
The draggable element is affected by the css:ui-draggable, and the css:ui-draggable-dragging in the drag process.
If you need more than just drag, but a complete drag-and-drop feature, see the Droppable plug-in for the jquery UI, which provides a draggable goal.
All of the callback functions (Start, stop, drag, etc.) accept two parameters:
Event: Browser-native events
UI: A jquery UI object that has the following main properties
Ui.helper: The jquery wrapper object for the element being dragged, Ui.helper.context can get to the native DOM element.
Ui.position:ui.helper (that is, the element we are dragging) is offset by the parent element (which contains its own element, if it is the top-level, corresponding to the body), and the value is an object {top, left}---- That is, you can use Ui.position.top to get the top current offset of the element and the parent element.
Ui.offset: With Ui.position, this represents the offset to the upper left edge of the browser content area (note that it is the content area, not the body area of the HTML). The body of HTML is offset by default in various browsers relative to offset.
Options
Addclasses:
Type Boolean (Boolean value)
[Default Value]true
[Have impact]
Used to set whether the draggable element is decorated with a ui-draggable style. The main purpose is to optimize performance considerations when initializing many (hundreds) of elements through. Draggable (), but the setting of this option does not affect the style of the ui-draggable-dragging style change drag process.
True indicates that the ui-draggable style is added to the element.
False indicates that the ui-draggable style is not added to the element.
[code example]draggable the initialization of other options, gets the property value, sets the property value section in addition to special features, no longer repeat, paste the code only.
[Initialize]
$ ('. Selector '). Draggable ({addclasses:false});
Renders the element selected by the. Selector selector as a drag control and does not add a ui-draggable style to it
[Get property value]
var addclasses = $ (' #draggable '). draggable (' option ', ' addclasses ');
Gets the value of the addclasses option for the drag control selected by the. Selector selector.
[Set property value]
$ ('. Selector '). draggable (' option ', ' addclasses ', false);
Set the Addclasses option value of the drag control selected by the. Selector selector to false.
Appendto:
Type element, Selector (HTML element object or selector)
[Default] ' Parent ' element
[Have impact]
Used to specify the container that the control ui.helper during the drag process, by default, Ui.helper uses the same container as the original defined draggable, which is its parent element.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({appendto: ' body '});
[Get property value]
Getter
var appendto = $ ('. Selector '). draggable (' option ', ' appendto ');
[Set property value]
Setter
$ ('. Selector '). draggable (' option ', ' appendto ', ' body ');.
Axis
Type String, Boolean (the desirable value is ' x ', ' Y ', false)
' x ': can only be dragged horizontally
' Y ': can only be dragged vertically
False: can be either horizontal or vertical drag.
[Default value]false, drag direction not Limited
[Have impact]
Constrain the orientation in the drag process.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({axis: ' x '});
[Get property value]
var axis = $ ('. Selector '). draggable (' option ', ' axis ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' axis ', ' X ');
Cancel
[Type] Selector
[Default value] ': input, option '
[Have impact]
Specifying this type of element by selector cannot be rendered as a draggable control.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({cancel: ' button '});
[Get property value]
var cancel = $ ('. Selector '). draggable (' option ', ' Cancel ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' Cancel ', ' button ');
Connecttosortable: This option requires a joint work with sortable.
[Type] Selector
[Default value] ': input, option '
[Have impact]
Specifying this type of element by selector cannot be rendered as a draggable control.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({cancel: ' button '});
[Get property value]
var cancel = $ ('. Selector '). draggable (' option ', ' Cancel ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' Cancel ', ' button ');
Containment:
[Type] Selector, element, string, array.
Selectors: can only be dragged within the element of a selector constraint
Element: can only be dragged within a given element
String:
Parent: can only be dragged inside the parent container
Document: Scroll bar automatically appears under document in the current HTML document as it is dragged, beyond the scope of the browser window
Widow: can only be dragged in the content area of the current browser window, dragging outside the current window range, does not cause scroll bars ...
Arrays: [x1, y1, x2, Y2] delimit an area in the form of start horizontal coordinates, start vertical coordinates, end horizontal coordinates, end vertical coordinates, and only drag within this area. When specified in this manner, the value is the offset value relative to the upper-left corner of the current browser window's content area.
False: Do not limit the range of activities that are dragged
[Default Value]false
[Have impact]
Affects the active area of the specified drag control.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({containment: ' parent '});
[Get property value]
var containment = $ ('. Selector '). draggable (' option ', ' containment ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' containment ', ' parent ');
Cursor
[Type] string.
[Default value] ' auto '
[Have impact]
affects specifies the mouse style that can be dragged during dragging, after which the original element of the control is required to support the specified cursor style, and the default cursor style of the original element is used if the specified value original element is not supported. For example, $ (' Input[type=button] '). Draggable ({cursor: ' crosshair '}); Because the button does not support crosshair this mouse style, it is displayed in the default form.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({cursor: ' crosshair '});
[Get property value]
var cursor = $ ('. Selector '). draggable (' option ', ' cursor ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' cursor ', ' crosshair ');
Cursorat:
[Type] Object
Determines the position by setting one or two of the property values of the object's top, left, right, and bottom.
[Default Value]false
[Have impact]
In the process of dragging a control, where the mouse is displayed on the control, the value is False (the default), where you click the start drag, where the mouse position is located, and if set, it is offset in the upper-left corner of the control itself, for example: $ ('. Selector '). Draggable (' Option ', ' Cursorat ', {left:8, top:8}); During the drag process, the mouse shifts 8 pixels down to the right in its upper-left corner.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({cursor: ' crosshair '});
[Get property value]
var cursor = $ ('. Selector '). draggable (' option ', ' cursor ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' cursor ', ' crosshair ');
Delay
[Type] integer, in milliseconds
[Default Value]0
[Have impact]
You can drag the control from the left mouse button to start, to the drag effect of the delay generated. This option can be used to block some of the unexpected clicks that result from invalid drag. The specific effect is: a drag, from the left mouse button press, to delay specified time, if the left mouse button has not been released, then the drag is considered effective, otherwise, that this drag is invalid.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({delay:500});
[Get property value]
var delay = $ ('. Selector '). draggable (' option ', ' delay ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' delay ', 500);
Distance
[Type] integer, in pixels
[Default Value]1
[Have impact]
You can drag controls to start with the left mouse button and the displacement that the mouse must produce when the drag effect occurs. This option can be used to block some of the unexpected clicks that result from invalid drag. The specific effect is: a drag, from the left mouse button press, only when the mouse generated displacement to reach the distance specified value, it is considered to be a valid drag.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({distance:30});
[Get property value]
var distance = $ ('. Selector '). draggable (' option ', ' distance ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' distance ', 30);
Grid
[Type] array [x, y], x for horizontal size, y for vertical size, in pixels
[Default Value]false
[Have impact]
You can drag a control by dragging it in a grid, which means that the unit in the drag is as large as the size of the array described by the GUID option.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({grid: [50, 20]});
[Get property value]
var Grid = $ ('. Selector '). draggable (' option ', ' grid ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' grid ', [50, 20]);
Handle
[Type] Selector or element
[Default Value]false
[Have impact]
Specifies the element that triggers the drag.   Usage: Set a Id=window div as a drag control, and set its handle to be a id=title span in the DIV, so it's only valid to click Drag on the Id=title span. Note: This element must be a child element of the control that can be dragged.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({handle: ' H2 '});
[Get property value]
var handle = $ ('. Selector '). draggable (' option ', ' handle ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' Handle ', ' H2 ');
Helper
[Type] string or function
String value:
' Original ': Drag the control itself to move
' Clone ': Clones a removable control itself a move that is unchanged in its original position
function must return a DOM element: the process of displaying the drag by moving the DOM element returned by the function.
[Default value] ' original '
[Have impact]
The element that helps the user know the current drag position during the drag process.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({helper: ' clone '});
[Get property value]
var helper = $ ('. Selector '). draggable (' option ', ' helper ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' helper ', ' clone ');
Iframefix:
[Type] Boolean or selector, the selection result of the selector needs to be an IFRAME element
[Default Value]false
[Have impact]
Prevents the default response of the IFRAME to the mouse movement event as the mouse pointer moves in the IFRAME area during drag.
If set to True, the MouseMove event for all IFRAME on the current page in the drag process is blocked, and if a selector is set, the MouseMove event for the specified IFrame will be blocked.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({iframefix:true});
[Get property value]
var Iframefix = $ ('. Selector '). draggable (' option ', ' iframefix ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' Iframefix ', true);
Opacity
[Type] floating-point value
[Default Value]false
[Have impact]
The Opacity of the helper (the control that follows the mouse movement while dragging) during the drag process.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({opacity:0.35});
[Get property value]
var opacity = $ ('. Selector '). draggable (' option ', ' opacity ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' opacity ', 0.35);
Refreshpositions:
Type Boolean
[Default Value]false
[Have impact]
If set to True, all droppable locations are evaluated in each MouseMove event.
Note: This option is primarily used to resolve advanced dynamic page presentation issues. Use caution.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({refreshpositions:true});
[Get property value]
var refreshpositions = $ ('. Selector '). draggable (' option ', ' refreshpositions ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' refreshpositions ', true);
Revert
Type Boolean, String
[Default Value]false
[Have impact]
Affects whether to return to the original position after one drag.
True: The element automatically returns to its original position after each drag stop
' Invalid ': The element is not returned to its original location unless it is a droppable and is successfully drop (put).
' Valid ': other than invalid.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({revert:true});
[Get property value]
var revert = $ ('. Selector '). draggable (' option ', ' revert ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' revert ', true);
Revertduration:
[Type] Integer
[Default Value]500
[Have impact]
Revert (return to original position) the time required for the entire process, in milliseconds. This property is ignored if the set revert option is set to false.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({revertduration:1000});
[Get property value]
var revertduration = $ ('. Selector '). draggable (' option ', ' revertduration ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' revertduration ', 1000);
Scope
[Type] String
[Default] ' defaults '
[Have impact]
This option describes a range that is used in conjunction with Droppable's option with the same name, and Droppable's accept option is used to set acceptable draggable controls, while an acceptable drggable control is constrained by the scope option. Must be draggable and droppable in the same scope to tow each other.
For example:
$ (' #draggable_a '). Draggable ({scope: ' a '});
$ (' #draggable_b '). Draggable ({scope: ' B '});
$ (' #droppable_a '). Droppable ({scope: ' a '});
$ (' #droppable_b '). Droppable ({scope: ' B '});
The Accept option for the Droppable control defaults to ' * ', which appears to be draggable_a, draggable_b freely placed in droppable_a and Droppable_b, but because of scope constraints, draggable _a can only be put into the droppable_a, Draggable_b can only send milk to droppable_b.
Note: This option is similar to the meaning of a variable's namespace. The default value is ' default ', which means that if not specified, everyone still has scope, the name is default.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({scope: ' tasks '});
[Get property value]
var scope = $ ('. Selector '). draggable (' option ', ' scope ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' scope ', ' tasks ');
Scroll
Type Boolean
[Default Value]true
[Have impact]
If set to True, the container automatically increases the scroll bar when the drag process exceeds the drag control container
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({scroll:false});
[Get property value]
var scope = $ ('. Selector '). draggable (' option ', ' scope ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' scroll ', false);
Scrollsensitivity:
[Type] integer value
[Default Value]20
[Have impact]
The sensitivity of the scroll bar.
The mouse pointer below refers to the position of the mouse as it moves through the draggable control.
The scroll bar starts scrolling when the mouse pointer and the edge of the container with the Draggable control are in the same distance.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({scrollsensitivity:40});
[Get property value]
var scrollsensitivity = $ ('. Selector '). draggable (' option ', ' scrollsensitivity ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' scrollsensitivity ', 40);
Scrollspeed:
[Type] integer value
[Default Value]20
[Have impact]
The scroll bar scrolls how many pixel values at a time because of the scrolling that is caused by scrollsensitivity.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({scrollspeed:40});
[Get property value]
var scrollspeed = $ ('. Selector '). draggable (' option ', ' scrollspeed ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' scrollspeed ', 40);
Snap
Type Boolean, Selector
[Default Value]false
[Have impact]
The adsorption function is set to true equivalent to the settings selector. Ui-draggable, the effect is in the selector specified all the elements, the current draggable control can achieve the adsorption function, adsorption is the drag process, near but not yet to the target component is, Automatically sucks the component that is being dragged through.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({snap:true});
[Get property value]
var snap = $ ('. Selector '). draggable (' option ', ' snap ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' snap ', true);
Snapmode:
[Type] string with optional values as follows
' Inner ': can be adsorbed within the specified element
' Outer ': can be adsorbed outside the specified element
' Both ': it can be adsorbed outside.
[Default value] ' both '
[Have impact]
Set the mode of adsorption time.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({snapmode: ' outer '});
[Get property value]
var Snapmode = $ ('. Selector '). draggable (' option ', ' Snapmode ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' Snapmode ', ' outer ');
Snaptolerance:
[Type] Integer
[Default Value]20
[Have impact]
To set the number of pixels from the edge of the target object, adsorption.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({snap:true});
[Get property value]
var snap = $ ('. Selector '). draggable (' option ', ' snap ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' snap ', true);
Stack
[Type] Object {group: '. Selector ', min:50}
[Default Value]false
[Have impact]
When you initialize a set of draggable controls one at a time, you select some of these draggable controls in a given selector as a group, at which point the group of Draggable controls can implement the always-before-most effect of the current drag. Min is used to specify the minimum value of the Z-index value for this group.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({stack: {group: ' Products ', min:50}});
[Get property value]
var stack = $ ('. Selector '). draggable (' option ', ' stack ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' stack ', {group: ' Products ', min:50});
ZIndex:
[Type] Integer
[Default Value]false
[Have impact]
The Z-index value of the helper (the control that follows the mouse movement) when you drag. Z-index is the layering layer in the CSS, the larger the number, the higher the upper.
[code Example]
[Initialize]
$ ('. Selector '). Draggable ({zindex:2700});
[Get property value]
var zindex = $ ('. Selector '). draggable (' option ', ' zindex ');
[Set property value]
$ ('. Selector '). draggable (' option ', ' ZIndex ', 2700);
Event
Start: Drag starts, the mouse clicks, starts to move.
[Type]dragstart
[Parameters accepted by the callback function]
Event: Native browser events.
Ui:jquery UI Objects
This: The currently dragged control DOM object
Drag: The mouse moves during the drag process.
[Type]drag
[Parameters accepted by the callback function]
Event: Native browser events.
Ui:jquery UI Objects
This: The currently dragged control DOM object
Stop: Drag end.
[Type]dragstop
[Parameters accepted by the callback function]
Event: Native browser events.
Ui:jquery UI Objects
This: The currently dragged control DOM object
[code Example]
Sets an event when initialized.
$ ('. Selector '). Draggable ({
Start:function (event, UI) {alert (this);},
Drag:function (event, UI) {alert (this);},
Stop:function (event, UI) {alert (this);}
});
A dynamic binding event. When dynamic binding, the event name used is the type of event.
$ (". 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 so that it is rolled back to the state before the element was initialized to a drag control.
[code Example]
$ (". Selector"). ProgressBar (' destroy ');
Destroys a drag control specified by the previously initialized. Selector so that it returns the state before initialization.
Disable: Changes the style of a drag control to a failure, which corresponds to the Enable.
Enable: Changes the style of a drag control to be allowed, corresponding to the Disable.
Option: Gets or sets options for the drag control, the second parameter is the option name, and the third parameter is the value. If you do not specify a value, you are getting, specifying a value, which is the setting.

Summary
Addclasses: Used to set whether to add ui-draggable style.
Appendto: Where to add the settings
Axis: Set the direction of the drag
Cancel, handle: Sets the area that controls the drag action of the entire control, and the cancel specifies that the range cannot be dragged handle the specified area control control.
Connecttosortable: Need to integrate with sortable.
Containment: Set Control drag Range
Cursor, Cursorat: Sets the style of the mouse and the position of the relative space itself during the drag process.
Delay, Distance: Set drag delay, delay set delay time, distance set delay distance, to prevent the unexpected drag caused by incorrect clicks.
Grid: Sets the unit in which the drag process moves (moving in small cells)
Helper: Sets the component that follows the mouse movement during the drag process.
Iframefix: Resolves the event issue after cascading with the IFRAME during the drag process.
Opacity: The opacity of the drag process helper.
Refreshpositions: During the drop process, the mouse will calculate the position every time it moves.
Revert, Revertduration: setting undo movement related.
Scope: Sets the draggable domain, which is used to determine the targets that can be placed when used in conjunction with droppable.
Scroll, scrollsensitivity, Scrollspeed: Set the scroll bar issues associated with the drag process.
Snap, Snapmode, snaptolerance: Sets the adsorption of the related properties.
Stack, ZIndex: Sets the level of the control.