jquery.ui.draggable Chinese documentation (original translation)_jquery

[Original translation]
JQuery UI Draggable plug-in is used to make the selected elements draggable by the mouse.
Draggable elements are affected by css: ui- draggable, css during dragging: ui-draggable-dragging.
If you need not just dragging, but a complete drag-and-drop function, please refer to JQuery UI's Droppable plug-in, which provides a draggable drop function. The goal.
All callback functions (start, stop, drag, etc. events) accept two parameters:
event: a browser native event
ui: a JQuery ui object, which has the following main attributes
ui.helper: JQuery wrapper object of the element being dragged, ui.helper.context can get the native DOM element.
ui.position: ui.helper (that is, the element we want to drag) Relative to the offset of the parent element (including its own element, if it is the top level, it corresponds to the body), the value is an object {top, left}----that is, you can use ui.position.top to get the element and the parent element The current offset of top
ui.offset: Agree with ui.position, here represents the offset from the upper left border of the browser content area (note, it is the content area, not the body area of ​​html. The body of html is in By default, various browsers will be offset relative to offset.)
[Option]
addClasses:
[Type]Boolean (Boolean value)
[Default value] true
[Influence]
Used to set whether to decorate draggable elements with the ui-draggable style. Mainly to optimize performance when initializing many (hundreds) elements through .draggable(), however, this option The setting will not affect the ui-draggable-dragging style and change the drag process style.
true means that the ui-draggable style is added to the element.
false means that the ui-draggable style is not added to the element.
[Code Example] Initialization of other options of draggable, getting attribute values, and setting attribute values. Except for special functions, we will not go into details, just paste the code.
[Initialization]
$('.selector'). draggable({ addClasses: false });
Render the element selected by the .selector into a draggable control without adding ui-draggable style
[Get attribute value]
var addClasses = $('#draggable').draggable('option', 'addClasses');
Get the value of the addClasses option of the draggable control selected by the .selector selector.
[Set attribute value]
$('.selector').draggable('option', 'addClasses', false);
Set the addClasses option value of the draggable control selected by the .selector selector to false.
appendTo:
[Type]Element, Selector (HTML element object or selector)
[Default value]'parent' parent element
[Influence]
Used to specify the ui.helper of the control during the dragging process Container, by default, ui.helper uses the same container as the initially defined draggable, which is its parent element.
[Code Example]
[Initialization]
$('.selector').draggable ({ appendTo: 'body' });
[Get attribute value]
//getter
var appendTo = $('.selector').draggable('option', 'appendTo');
[Set attribute value]
//setter
$('.selector').draggable('option', 'appendTo', 'body');.
axis:
[Type ]String, Boolean (available values ​​are 'x', 'y', false)
'x': Can only be dragged horizontally
'y': Can only be dragged vertically
false: Both can be done Horizontal, you can also drag vertically.
[Default value] false, does not limit the direction of dragging
[Influence]
Constrains the orientation during dragging.
[Code example]
[Initialization]
$('.selector').draggable({ axis: 'x' });
[Get attribute value]
var axis = $('.selector').draggable( 'option', 'axis');
[Set attribute value]
$('.selector').draggable('option', 'axis', 'x');
cancel:
[Type] selector
[Default value]':input, option'
[Impact]
Specifying this type of element through the selector cannot be rendered into a draggable control.
[Code example]
[Initialization]
$('.selector').draggable({ cancel: 'button' });
[Get attribute value]
var cancel = $('.selector'). draggable('option', 'cancel');
[Set attribute value]
$('.selector').draggable('option', 'cancel', 'button');
connectToSortable: This option needs to work in conjunction with sortable, and will be discussed again.
[Type] selector
[Default value]':input, option'
[Impact]
Specifying this type of element through a selector cannot Rendered into a draggable control.
[Code example]
[Initialization]
$('.selector').draggable({ cancel: 'button' });
[Get attribute value]
var cancel = $('.selector').draggable('option', 'cancel');
[Set attribute value]
$('. selector').draggable('option', 'cancel', 'button');
containment:
[Type] selector, element, string, array.
Selector: can only be selected Drag within the element constrained by the container
Element: Can only drag within the given element
String:
parent: Can only drag within the parent container
Document: In the current html document It can be dragged under the document. When it exceeds the scope of the browser window, the scroll bar will automatically appear
Widow: You can only drag in the content area of ​​the current browser window. Dragging beyond the scope of the current window will not cause the scroll bar to appear. ..
Array: [x1, y1, x2, y2] delimits an area in the form of [start horizontal coordinate, start vertical coordinate, end horizontal coordinate, end vertical coordinate], and can only be dragged within this area. When specified 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: Does not limit the active range of dragging
[Default value]false
[Influence]
Affects the active area of ​​the specified draggable control.
[Code example]
[Initialization]
$('.selector').draggable({ containment: 'parent' });
[Get attribute value]
var containment = $('.selector').draggable('option', 'containment');
[Set attribute value]
$('.selector').draggable ('option', 'containment', 'parent');
cursor:
[Type] string.
[Default value]'auto'
[Influence]
Impact specification The mouse style of a draggable control during the dragging process. After setting this style, the original element of the control needs to support the specified cursor style. If the original element of the specified value does not support the specified cursor style, the default cursor style of the original element will be used. For example, $('input[type=button]').draggable({ cursor: 'crosshair' }); Since button does not support the crosshair mouse style, it will be displayed in the default form.
[Code Example]
[Initialization]
$('.selector').draggable({ cursor: 'crosshair' });
[Get attribute value]
var cursor = $('.selector').draggable(' option', 'cursor');
[Set attribute value]
$('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[Type] Object
Determine the position by setting one or two of the object's top, left, right, and bottom property values.
[Default value]false
[Influence]
In During the process of dragging the control, the position of the mouse displayed on the control. When the value is false (default), the mouse position will be where you click to start dragging. If set, it will be offset from the upper left corner of the control itself. Move the position, for example: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); Then during the dragging process, the mouse will move toward the upper left corner of itself. Offset 8 pixels from bottom to right.
[Code example]
[Initialization]
$('.selector').draggable({ cursor: 'crosshair' });
[Get Attribute value]
var cursor = $('.selector').draggable('option', 'cursor');
[Set attribute value]
$('.selector').draggable(' option', 'cursor', 'crosshair');
delay:
[Type] integer, unit is milliseconds
[Default value]0
[Influence]
Draggable control The delay from when the left mouse button is pressed to the dragging effect. This option can be used to prevent invalid dragging caused by some undesired clicks. The specific effect is: one drag, from when the left mouse button is pressed , by the time specified by delay, if the left mouse button has not been released, then the drag is considered valid, otherwise, the drag is considered invalid.
[Code Example]
[Initialization]
$('.selector').draggable({ delay: 500 });
[Get attribute value]
var delay = $('.selector').draggable('option', 'delay');
[Set attribute value]
$('.selector').draggable('option', 'delay', 500);
distance:
[Type] integer, unit is pixel
[Default value]1
[Effect]
Draggable controls start from when the left mouse button is pressed, and the mouse must move when the drag effect is generated. This option can be used to prevent some unwanted Invalid drag caused by the expected click. The specific effect is: one drag, from the left mouse button press, only when the displacement generated by the mouse reaches the value specified by distance, it is considered a valid drag.
[ Code example]
[Initialization]
$('.selector').draggable({ distance: 30 });
[Get attribute value]
var distance = $('.selector').draggable('option', 'distance');
[Set attribute value]
$('. selector').draggable('option', 'distance', 30);
grid:
[type] array [x, y], x represents the horizontal size, y represents the vertical size, the unit is pixels
[Default value]false
[Influence]
The draggable control is dragged in a grid manner, that is to say, the unit during the dragging process is as large as the grid described by the array specified by the guid option .
[Code example]
[Initialization]
$('.selector').draggable({ grid: [50, 20] });
[Get attribute value]
var grid = $('.selector').draggable('option', 'grid');
[Set attribute value]
$('.selector').draggable('option', 'grid', [50, 20]);
handle:
[type] selector or element
[default value]false
[effect]
Specifies the element that triggers dragging. Usage: A div with id=window is set as a draggable control, and its handle is set to a span with id=title in the div. Then, only clicking and dragging on the span with id=title is effective. Note: This element must be a child element of a draggable control.
[Code example]
[Initialization]
$('.selector').draggable({ handle: 'h2' });
[Get attribute value]
var handle = $('.selector').draggable('option', 'handle');
[Set attribute value]
$('.selector').draggable ('option', 'handle', 'h2');
helper:
[Type] string or function
String value:
'original': The draggable control itself can be moved
'clone': Clone the draggable control itself and move it, keeping its original position unchanged
The function must return a DOM element: use the DOM element movement returned by the function to show the dragging process.
[Default value]'original'
[Influence]
An element that helps the user know the current dragging position during the dragging process.
[Code example]
[Initialization]
$(' .selector').draggable({ helper: 'clone' });
[Get attribute value]
var helper = $('.selector').draggable('option', 'helper');
[Set attribute value]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[Type] Boolean value or selector, The selection result of the selector needs to be an iframe element
[default value] false
[impact]
This prevents the mouse pointer from moving in the iframe area during the dragging process, and the iframe's default response to mouse movement events.
If set to true, the mousemove event of all iframes on the current page during the dragging process will be blocked. If a selector is set, the mousemove event of the specified iframe will be blocked.
[Code Example]
[Initialization]
$('.selector').draggable({ iframeFix: true });
[Get attribute value]
var iframeFix = $('.selector').draggable('option' , 'iframeFix');
[Set attribute value]
$('.selector').draggable('option', 'iframeFix', true);
opacity:
[Type] float Point value
[Default value]false
[Influence]
The opacity of the helper (a control that follows the mouse when dragging) during dragging.
[Code example]
[ Initialization]
$('.selector').draggable({ opacity: 0.35 });
[Get attribute value]
var opacity = $('.selector').draggable('option', 'opacity');
[Set attribute value]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[Type]Boolean
[Default value]false
[Influence]
If set to true, all droppable positions will be calculated in each mousemove event.
Note: This option is mainly used to solve advanced dynamic pages Show the problem. Use with caution.
[Code example]
[Initialization]
$('.selector').draggable({ refreshPositions: true });
[Get attribute value]
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
[Set attribute value]
$('.selector').draggable('option', 'refreshPositions' , true);
revert:
[Type]Boolean, String
[Default value]false
[Influence]
Affects whether to return to the original position after a drag.
true: After each drag stops, the element automatically returns to its original position
'invalid': Unless it is a droppable and is successfully dropped, the element will not be returned to its original position.
'valid ': Other situations except invalid.
[Code example]
[Initialization]
$('.selector').draggable({ revert: true });
[Get attribute value]
var revert = $('.selector').draggable('option', 'revert');
[Set attribute value]
$('. selector').draggable('option', 'revert', true);
revertDuration:
[type] integer
[default value]500
[effect]
revert(return to the original position), the unit is milliseconds. If the revert option is set to false, this attribute is ignored.
[Code Example]
[Initialization]
$('.selector') .draggable({ revertDuration: 1000 });
[Get attribute value]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[Set attribute value ]
$('.selector').draggable('option', 'revertDuration', 1000);
scope:
[type] string
[default value]'default'
[Influence]
This option describes a scope and is used in conjunction with the droppable option of the same name. The accept option of droppable is used to set acceptable draggable controls. At the same time, acceptable drggable controls are subject to the scope option and must be the same Only draggables and droppables in a scope can drag and drop 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 of the droppable control is '*' by default. It seems that draggable_a and draggable_b can be freely placed into droppable_a and droppable_b. However, due to scope constraints, draggable_a can only be placed into droppable_a, draggable_b can only be sent to droppable_b.
Note: This option has a similar meaning to the namespace of the variable. The default value is 'default', which means that if not specified, everyone still has a scope, and the name is default That’s it.
[Code example]
[Initialization]
$('.selector').draggable({ scope: 'tasks' });
[Get attribute value]
var scope = $('.selector').draggable('option', 'scope');
[Set attribute value]
$('.selector').draggable('option', 'scope', ' tasks');
scroll:
[Type]Boolean
[Default value]true
[Effect]
If set to true, the draggable control container will be exceeded during the dragging process When , the container automatically adds a scroll bar
[Code example]
[Initialization]
$('.selector').draggable({ scroll: false });
[Get attribute value]
var scope = $('.selector').draggable('option', 'scope');
[Set attribute value]
$('.selector').draggable('option', ' scroll', false);
scrollSensitivity:
[type] integer value
[default value] 20
[effect]
The sensitivity of the scroll bar.
The mouse that belongs below The pointer refers to the position of the mouse during the movement of the draggable control.
When the distance between the mouse pointer and the edge of the container where the draggable control is located is, the scroll bar starts to scroll.
[Code Example]
[ Initialization]
$('.selector').draggable({ scrollSensitivity: 40 });
[Get attribute value]
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[Set attribute value]
$('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[type] integer value
[Default value]20
[Impact]
When scrolling due to scrollSensitivity occurs, how many pixels the scroll bar scrolls at a time.
[Code example]
[Initialization]
$('.selector').draggable({ scrollSpeed: 40 });
[Get attribute value]
var scrollSpeed ​​= $('.selector').draggable('option', 'scrollSpeed');
[Set attribute value]
$('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[Type]Boolean, selector
[Default value]false
[Effect]
Adsorption function, setting it to true is equivalent to setting the selector.ui-draggable. The specific effect is on all elements specified by the selector, and the current draggable control can Implement the adsorption function. Adsorption means that during the dragging process, if the component is close to but not yet touching the target component, the component being dragged will be automatically sucked in.
[Code Example]
[Initialization]
$( '.selector').draggable({ snap: true });
[Get attribute value]
var snap = $('.selector').draggable('option', 'snap');
[Set attribute value]
$('.selector').draggable('option', 'snap', true);
snapMode:
[Type] string, the optional values ​​are as follows
'inner': Can be adsorbed inside the specified element
'outer': Can be adsorbed outside the specified element
'both': Can be adsorbed both inside and outside.
[Default value]'both'
[Influence]
Set the mode when snapping.
[Code example]
[Initialization]
$('.selector').draggable({ snapMode: 'outer' });
   [获取属性值]
   var snapMode = $('.selector').draggable('option', 'snapMode');
   [设置属性值]
   $('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
   设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [获取属性值]
   var snap = $('.selector').draggable('option', 'snap');
   [设置属性值]
   $('.selector').draggable('option', 'snap', true);
stack:
[类型]对象{group: '.selector', min: 50}
[默认值]false
[产生影响]
   一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
   [初始化]
   $('.selector').draggable({ stack: { group: 'products', min: 50 } });
   [获取属性值]
   var stack = $('.selector').draggable('option', 'stack');
   [设置属性值]
   $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[类型]整数
[默认值]false
[产生影响]
   拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
   [初始化]
   $('.selector').draggable({ zIndex: 2700 });
   [获取属性值]
   var zIndex = $('.selector').draggable('option', 'zIndex');
   [设置属性值]
   $('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖动开始, 指鼠标按下, 开始移动.
[类型]dragstart
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
drag: 拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
stop: 拖动结束.
[类型]dragstop
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
     start: function(event, ui) { alert(this); },
     drag: function(event, ui) { alert(this); },
     stop: function(event, ui) { alert(this); }
});
动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.
$(".selector").bind('dragstart', function(event, ui) {
   alert(this);
});
$(".selector").bind('drag', function(event, ui) {
   alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
   alert(this);
});
[方法]
destroy: 完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
   $(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁, 使其返回初始化之前的状态.
disable: 将可拖动控件样式改变成为失效, 与enable对应.
enable: 将可拖动控件样式改变为允许, 与disable对应.
option: 获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置.

[Summary]
addClasses: Used to set whether to add ui-draggable style.
appendTo: Set where to append
axis: Set draggable style Moving direction
cancel, handle: Set the area that controls the dragging action of the entire control. cancel specifies the area that cannot be dragged, and handle specifies the area to control the dragging of the control.
connectToSortable: needs to be integrated with sortable.
containment: Set the draggable range of the control
cursor, cursorAt: Set the style of the mouse and its position relative to the space itself during the dragging process.
delay, distance: Set the delay of dragging, delay sets the delay time, distance sets the delay The purpose is to prevent unexpected dragging caused by accidental clicks.
grid: Set the unit of movement during the dragging process (move in small grids)
helper: Set the unit that follows the mouse movement during the dragging process. Component.
iframeFix: Solve the event problem after overlaying with iframe during dragging.
opacity: The opacity of the helper during dragging.
refreshPositions: During the drop process after setting, every mouse movement will be calculated Position.
revert, revertDuration: settings related to undo movement.
scope: set the domain of draggable, used to determine the target that can be placed when used in conjunction with droppable.
scroll, scrollSensitivity, scrollSpeed: set draggable Issues related to the scroll bar caused during the animation process.
snap, snapMode, snapTolerance: Set the properties related to snapping.
stack, zIndex: Set the level of the control.