jquery.ui.draggable中文文档
人气:0
注意事项:
1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议
2. 格式中的所有项都是选填, 如果没有, 不写就是了.
3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上
<!--[CDATA[这中间写内容]]>
4. 翻译过程中, 一块对应的是一个<translate />标签.
5. 希望大家工作愉快.
<?xml version="1.0" encoding="UTF-8" ?>
<project>
<translate item="draggable" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]><https://img.qb5200.com/download-x/description>
<url><![CDATA[http:/https://img.qb5200.com/download-x/docs.jquery.com]]></url>
<https://img.qb5200.com/download-x/depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]><https://img.qb5200.com/download-x/description>
<url><![CDATA[http://jqueryui.comhttps://img.qb5200.com/download-x/demos]]></url>
<https://img.qb5200.com/download-x/depend>
</relatives>
<overview>
<original><![CDATA[JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.
Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.
如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.
所有的回调函数(start, stop, drag等事件)接受两个参数:
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]></original>
</overview>
<options>
<option name="addClasses" default="true">
<types>
<type name="布尔值"></type>
</types>
<description><![CDATA[用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
true表示ui-draggable样式被添加到该元素.
false表示ui-draggable样式不被添加到该元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式]]></comment>
<code><![CDATA[$('.selector').draggable({ addClasses: false });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取.selector选择器选中的可拖动控件的addClasses选项的值.]]></comment>
<code><![CDATA[var addClasses = $('#draggable').draggable('option', 'addClasses');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[将.selector选择器选中的可拖动控件的addClasses选项值设置为false.]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'addClasses', false);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="appendTo" default="parent">
<types>
<type name="DOM元素" />
<type name="选择器" />
</types>
<description><![CDATA[用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ appendTo: 'body' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var appendTo = $('.selector').draggable('option', 'appendTo');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'appendTo', 'body');.]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="axis" default="false">
<types>
<type name="Boolean">
<options>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[既可以水平, 也可以垂直拖动.]]></comment>
</option>
</options>
</type>
<type name="String">
<options>
<option>
<value><![CDATA[x]]></value>
<comment><![CDATA[只能水平拖动]]></comment>
</option>
<option>
<value><![CDATA[y]]></value>
<comment><![CDATA[只能垂直拖动]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[约束拖动过程中的取向.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ axis: 'x' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var axis = $('.selector').draggable('option', 'axis');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'axis', 'x');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cancel" default=":input, option">
<types>
<type name="选择器">
</type>
</types>
<description><![CDATA[通过选择器指定这类元素不能被渲染成draggable控件.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cancel: 'button' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cancel = $('.selector').draggable('option', 'cancel');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cancel', 'button');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="connectToSortable" default="">
<types>
<type name="">
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[description]]></comment>
<code><![CDATA[description]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="containment" default="false">
<types>
<type name="选择器">
<description><![CDATA[只能在选择器约束的元素内拖动]]><https://img.qb5200.com/download-x/description>
</type>
<type name="元素">
<description><![CDATA[只能在给定的元素内拖动]]><https://img.qb5200.com/download-x/description>
</type>
<type name="字符串">
<options>
<option>
<value><![CDATA[parent]]></value>
<comment><![CDATA[只能在父容器内拖动]]></comment>
</option>
<option>
<value><![CDATA[document]]></value>
<comment><![CDATA[在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条]]></comment>
</option>
<option>
<value><![CDATA[widow]]></value>
<comment><![CDATA[只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条]]></comment>
</option>
</options>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
<type name="数组">
<description><![CDATA[[x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.]]><https://img.qb5200.com/download-x/description>
</type>
<type name="布尔型">
<options>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[不限制拖动的活动范围]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[影响指定可拖动控件的活动区域.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ containment: 'parent' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var containment = $('.selector').draggable('option', 'containment');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'containment', 'parent');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cursor" default="auto">
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair这个鼠标样式, 所以, 会以默认形式显示.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cursorAt" default="false">
<types>
<type name="对象">
<description><![CDATA[通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="delay" default="0">
<types>
<type name="整数">
<description><![CDATA[单位是毫秒]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ delay: 500 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var delay = $('.selector').draggable('option', 'delay');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'delay', 500);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="distance" default="1">
<types>
<type name="整数">
<description><![CDATA[单位是像素]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ distance: 30 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var distance = $('.selector').draggable('option', 'distance');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'distance', 30);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="grid" default="false">
<types>
<type name="数组">
<description><![CDATA[[x, y], x代表水平大小, y代表垂直大小, 单位是像素]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ grid: [50, 20] });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var grid = $('.selector').draggable('option', 'grid');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'grid', [50, 20]);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="handle" default="false">
<types>
<type name="选择器">
<description><![CDATA[选定的内部元素为控制拖动的部件]]><https://img.qb5200.com/download-x/description>
</type>
<type name="元素">
<description><![CDATA[指定的元素为控制拖动的部件]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的. 注意: 该元素一定要是可拖动控件的子元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ handle: 'h2' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var handle = $('.selector').draggable('option', 'handle');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'handle', 'h2');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="helper" default="original">
<types>
<type name="字符串">
<options>
<option>
<value><![CDATA[original]]></value>
<comment><![CDATA[可拖动控件本身移动]]></comment>
</option>
<option>
<value><![CDATA[clone]]></value>
<comment><![CDATA[将可拖动控件自身克隆一个移动, 自身在原始位置不变]]></comment>
</option>
</options>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
<type name="函数">
<description><![CDATA[函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[拖动过程中帮助用户知道当前拖动位置的元素. 也就是拖动过程中随鼠标显示的元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ helper: 'clone' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var helper = $('.selector').draggable('option', 'helper');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'helper', 'clone');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="iframeFix" default="false">
<types>
<type name="布尔值">
<options>
<option>
<value><![CDATA[true]]></value>
<comment><![CDATA[拖动过程中, 所有的iframe默认mousemove事件被屏蔽]]></comment>
</option>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[拖动过程中, 鼠标进入iframe时iframe的mousemove也会做默认事件响应.]]></comment>
</option>
</options>
</type>
<type name="选择器">
<description><![CDATA[针对选择到的iframe屏蔽mousemove事件默认响应]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应.
如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ iframeFix: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var iframeFix = $('.selector').draggable('option', 'iframeFix');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'iframeFix', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="opacity" default="false">
<types>
<type name="浮点数值">
<description><![CDATA[不透明度, 数值越小越透明]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ opacity: 0.35 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var opacity = $('.selector').draggable('option', 'opacity');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'opacity', 0.35);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="refreshPositions" default="false">
<types>
<type name="Boolean">
<description><![CDATA[如果设置为true, 所有的droppable位置会在每次mousemove事件中进行计算.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[该选项主要用于解决高级动态页面展现问题. 慎用.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ refreshPositions: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var refreshPositions = $('.selector').draggable('option', 'refreshPositions');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'refreshPositions', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="revert" default="false">
<types>
<type name="Boolean">
<options>
<option>
<value><![CDATA[true]]></value>
<comment><![CDATA[每次拖动停止之后, 元素自动回到原始位置]]></comment>
</option>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[拖动之后不会自动回到原始位置.]]></comment>
</option>
</options>
</type>
<type name="字符串">
<options>
<option>
<value><![CDATA[invalid]]></value>
<comment><![CDATA[除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment>
</option>
<option>
<value><![CDATA[valid]]></value>
<comment><![CDATA[除非是放入一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[影响一次拖动之后是否回归到原始位置.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ revert: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var revert = $('.selector').draggable('option', 'revert');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'revert', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="revertDuration" default="500">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ revertDuration: 1000 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var revertDuration = $('.selector').draggable('option', 'revertDuration');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'revertDuration', 1000);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scope" default="default">
<relatives>
<innerrelative item="droppable" type="option" name="accept"><![CDATA[droppable中accept指定的选择器选择到的元素还必须满足scope相同.]]></innerrelative>
<innerrelative item="droppable" type="option" name="scope"><![CDATA[能够放入droppable的draggable两个元素的scope值必须相同.]]></innerrelative>
</relatives>
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[该选项描述一个范围, 和droppable的同名选项结合使用, droppable的accept选项用来设置可以接受的draggable控件, 同时, 可接受的drggable控件受scope选项约束, 必须是同一个scope中的draggable和droppable才可以互相拖放.
例如:
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scope: 'tasks' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scope', 'tasks');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scroll" default="true">
<types>
<type name="Boolean">
</type>
</types>
<description><![CDATA[如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scroll: false });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scroll', false);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scrollSensitivity" default="20">
<types>
<type name="整数值">
</type>
</types>
<description><![CDATA[滚动条的敏感度.
下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.
鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scrollSensitivity: 40 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scrollSensitivity', 40);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scrollSpeed" default="20">
<types>
<type name="整数值">
</type>
</types>
<description><![CDATA[由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scrollSpeed: 40 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scrollSpeed', 40);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snap" default="false">
<types>
<type name="Boolean">
<description><![CDATA[设置为true等价与设置选择器.ui-draggable]]><https://img.qb5200.com/download-x/description>
</type>
<type name="选择器">
<description><![CDATA[选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snap: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snapMode" default="both">
<types>
<type name="字符串">
<options>
<option>
<value><![CDATA[inner]]></value>
<comment><![CDATA[在指定的元素内部可以吸附]]></comment>
</option>
<option>
<value><![CDATA[outer]]></value>
<comment><![CDATA[在指定元素外部可以吸附]]></comment>
</option>
<option>
<value><![CDATA[both]]></value>
<comment><![CDATA[里面外面都可以吸附]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[设定吸附时候的模式.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snapMode: 'outer' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snapMode = $('.selector').draggable('option', 'snapMode');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snapMode', 'outer');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snapTolerance" default="20">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[设定离目标对象的边多少像素的时候, 进行吸附.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snap: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="stack" default="false">
<types>
<type name="对象">
<description><![CDATA[{group: '.selector', min: 50} 其中, group制定的是一个选择器, 用来规定那些对象是一组. min是该组的最小z-index值]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ stack: { group: 'products', min: 50 } });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var stack = $('.selector').draggable('option', 'stack');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="zIndex" default="false">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ zIndex: 2700 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var zIndex = $('.selector').draggable('option', 'zIndex');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'zIndex', 2700);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
</options>
<events>
<event name="start">
<trigger><![CDATA[拖动开始, 指鼠标按下, 开始移动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dragstart]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
start: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('dragstart', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
<event name="drag">
<trigger><![CDATA[拖动过程中鼠标移动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: drag]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
drag: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('drag', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
<event name="stop">
<trigger><![CDATA[拖动结束]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dragstop]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
stop: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('dragstop', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('destroy');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="disable">
<description><![CDATA[将可拖动控件样式改变成为失效, 与enable对应.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('disable');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="enable">
<description><![CDATA[将可拖动控件样式改变为允许, 与disable对应.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('enable');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>
</arguments>
<description><![CDATA[获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
</methods>
<summarize><![CDATA[addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次.
]]--></summarize>
</translate>
</project>
1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议
2. 格式中的所有项都是选填, 如果没有, 不写就是了.
3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上
<!--[CDATA[这中间写内容]]>
4. 翻译过程中, 一块对应的是一个<translate />标签.
5. 希望大家工作愉快.
复制代码 代码如下:
<?xml version="1.0" encoding="UTF-8" ?>
<project>
<translate item="draggable" version="7.1">
<translators>
<translator nickname="selfimpr" name="雷果国" mail="lgg860911@yahoo.com" homepage="http://blog.csdn.net/lgg201" qq="285821471" />
</translators>
<relatives>
<depend isitem="false">
<name><![CDATA[jquery]]></name>
<description><![CDATA[jquery的核心库]]><https://img.qb5200.com/download-x/description>
<url><![CDATA[http:/https://img.qb5200.com/download-x/docs.jquery.com]]></url>
<https://img.qb5200.com/download-x/depend>
<depend isitem="false">
<name><![CDATA[jquery.ui.core]]></name>
<description><![CDATA[jquery.ui的核心库]]><https://img.qb5200.com/download-x/description>
<url><![CDATA[http://jqueryui.comhttps://img.qb5200.com/download-x/demos]]></url>
<https://img.qb5200.com/download-x/depend>
</relatives>
<overview>
<original><![CDATA[JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.
Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.
如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.
所有的回调函数(start, stop, drag等事件)接受两个参数:
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]></original>
</overview>
<options>
<option name="addClasses" default="true">
<types>
<type name="布尔值"></type>
</types>
<description><![CDATA[用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
true表示ui-draggable样式被添加到该元素.
false表示ui-draggable样式不被添加到该元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式]]></comment>
<code><![CDATA[$('.selector').draggable({ addClasses: false });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取.selector选择器选中的可拖动控件的addClasses选项的值.]]></comment>
<code><![CDATA[var addClasses = $('#draggable').draggable('option', 'addClasses');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[将.selector选择器选中的可拖动控件的addClasses选项值设置为false.]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'addClasses', false);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="appendTo" default="parent">
<types>
<type name="DOM元素" />
<type name="选择器" />
</types>
<description><![CDATA[用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ appendTo: 'body' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var appendTo = $('.selector').draggable('option', 'appendTo');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'appendTo', 'body');.]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="axis" default="false">
<types>
<type name="Boolean">
<options>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[既可以水平, 也可以垂直拖动.]]></comment>
</option>
</options>
</type>
<type name="String">
<options>
<option>
<value><![CDATA[x]]></value>
<comment><![CDATA[只能水平拖动]]></comment>
</option>
<option>
<value><![CDATA[y]]></value>
<comment><![CDATA[只能垂直拖动]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[约束拖动过程中的取向.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ axis: 'x' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var axis = $('.selector').draggable('option', 'axis');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'axis', 'x');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cancel" default=":input, option">
<types>
<type name="选择器">
</type>
</types>
<description><![CDATA[通过选择器指定这类元素不能被渲染成draggable控件.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cancel: 'button' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cancel = $('.selector').draggable('option', 'cancel');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cancel', 'button');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="connectToSortable" default="">
<types>
<type name="">
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[description]]></comment>
<code><![CDATA[description]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="containment" default="false">
<types>
<type name="选择器">
<description><![CDATA[只能在选择器约束的元素内拖动]]><https://img.qb5200.com/download-x/description>
</type>
<type name="元素">
<description><![CDATA[只能在给定的元素内拖动]]><https://img.qb5200.com/download-x/description>
</type>
<type name="字符串">
<options>
<option>
<value><![CDATA[parent]]></value>
<comment><![CDATA[只能在父容器内拖动]]></comment>
</option>
<option>
<value><![CDATA[document]]></value>
<comment><![CDATA[在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条]]></comment>
</option>
<option>
<value><![CDATA[widow]]></value>
<comment><![CDATA[只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条]]></comment>
</option>
</options>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
<type name="数组">
<description><![CDATA[[x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.]]><https://img.qb5200.com/download-x/description>
</type>
<type name="布尔型">
<options>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[不限制拖动的活动范围]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[影响指定可拖动控件的活动区域.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ containment: 'parent' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var containment = $('.selector').draggable('option', 'containment');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'containment', 'parent');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cursor" default="auto">
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair这个鼠标样式, 所以, 会以默认形式显示.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="cursorAt" default="false">
<types>
<type name="对象">
<description><![CDATA[通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ cursor: 'crosshair' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var cursor = $('.selector').draggable('option', 'cursor');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'cursor', 'crosshair');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="delay" default="0">
<types>
<type name="整数">
<description><![CDATA[单位是毫秒]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ delay: 500 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var delay = $('.selector').draggable('option', 'delay');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'delay', 500);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="distance" default="1">
<types>
<type name="整数">
<description><![CDATA[单位是像素]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ distance: 30 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var distance = $('.selector').draggable('option', 'distance');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'distance', 30);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="grid" default="false">
<types>
<type name="数组">
<description><![CDATA[[x, y], x代表水平大小, y代表垂直大小, 单位是像素]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ grid: [50, 20] });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var grid = $('.selector').draggable('option', 'grid');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'grid', [50, 20]);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="handle" default="false">
<types>
<type name="选择器">
<description><![CDATA[选定的内部元素为控制拖动的部件]]><https://img.qb5200.com/download-x/description>
</type>
<type name="元素">
<description><![CDATA[指定的元素为控制拖动的部件]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的. 注意: 该元素一定要是可拖动控件的子元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ handle: 'h2' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var handle = $('.selector').draggable('option', 'handle');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'handle', 'h2');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="helper" default="original">
<types>
<type name="字符串">
<options>
<option>
<value><![CDATA[original]]></value>
<comment><![CDATA[可拖动控件本身移动]]></comment>
</option>
<option>
<value><![CDATA[clone]]></value>
<comment><![CDATA[将可拖动控件自身克隆一个移动, 自身在原始位置不变]]></comment>
</option>
</options>
<description><![CDATA[description]]><https://img.qb5200.com/download-x/description>
</type>
<type name="函数">
<description><![CDATA[函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[拖动过程中帮助用户知道当前拖动位置的元素. 也就是拖动过程中随鼠标显示的元素.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ helper: 'clone' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var helper = $('.selector').draggable('option', 'helper');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'helper', 'clone');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="iframeFix" default="false">
<types>
<type name="布尔值">
<options>
<option>
<value><![CDATA[true]]></value>
<comment><![CDATA[拖动过程中, 所有的iframe默认mousemove事件被屏蔽]]></comment>
</option>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[拖动过程中, 鼠标进入iframe时iframe的mousemove也会做默认事件响应.]]></comment>
</option>
</options>
</type>
<type name="选择器">
<description><![CDATA[针对选择到的iframe屏蔽mousemove事件默认响应]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应.
如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ iframeFix: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var iframeFix = $('.selector').draggable('option', 'iframeFix');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'iframeFix', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="opacity" default="false">
<types>
<type name="浮点数值">
<description><![CDATA[不透明度, 数值越小越透明]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ opacity: 0.35 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var opacity = $('.selector').draggable('option', 'opacity');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'opacity', 0.35);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="refreshPositions" default="false">
<types>
<type name="Boolean">
<description><![CDATA[如果设置为true, 所有的droppable位置会在每次mousemove事件中进行计算.]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[该选项主要用于解决高级动态页面展现问题. 慎用.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ refreshPositions: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var refreshPositions = $('.selector').draggable('option', 'refreshPositions');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'refreshPositions', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="revert" default="false">
<types>
<type name="Boolean">
<options>
<option>
<value><![CDATA[true]]></value>
<comment><![CDATA[每次拖动停止之后, 元素自动回到原始位置]]></comment>
</option>
<option>
<value><![CDATA[false]]></value>
<comment><![CDATA[拖动之后不会自动回到原始位置.]]></comment>
</option>
</options>
</type>
<type name="字符串">
<options>
<option>
<value><![CDATA[invalid]]></value>
<comment><![CDATA[除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment>
</option>
<option>
<value><![CDATA[valid]]></value>
<comment><![CDATA[除非是放入一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[影响一次拖动之后是否回归到原始位置.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ revert: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var revert = $('.selector').draggable('option', 'revert');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'revert', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="revertDuration" default="500">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ revertDuration: 1000 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var revertDuration = $('.selector').draggable('option', 'revertDuration');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'revertDuration', 1000);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scope" default="default">
<relatives>
<innerrelative item="droppable" type="option" name="accept"><![CDATA[droppable中accept指定的选择器选择到的元素还必须满足scope相同.]]></innerrelative>
<innerrelative item="droppable" type="option" name="scope"><![CDATA[能够放入droppable的draggable两个元素的scope值必须相同.]]></innerrelative>
</relatives>
<types>
<type name="字符串">
</type>
</types>
<description><![CDATA[该选项描述一个范围, 和droppable的同名选项结合使用, droppable的accept选项用来设置可以接受的draggable控件, 同时, 可接受的drggable控件受scope选项约束, 必须是同一个scope中的draggable和droppable才可以互相拖放.
例如:
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scope: 'tasks' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scope', 'tasks');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scroll" default="true">
<types>
<type name="Boolean">
</type>
</types>
<description><![CDATA[如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scroll: false });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scope = $('.selector').draggable('option', 'scope');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scroll', false);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scrollSensitivity" default="20">
<types>
<type name="整数值">
</type>
</types>
<description><![CDATA[滚动条的敏感度.
下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.
鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scrollSensitivity: 40 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scrollSensitivity', 40);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="scrollSpeed" default="20">
<types>
<type name="整数值">
</type>
</types>
<description><![CDATA[由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ scrollSpeed: 40 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'scrollSpeed', 40);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snap" default="false">
<types>
<type name="Boolean">
<description><![CDATA[设置为true等价与设置选择器.ui-draggable]]><https://img.qb5200.com/download-x/description>
</type>
<type name="选择器">
<description><![CDATA[选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snap: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snapMode" default="both">
<types>
<type name="字符串">
<options>
<option>
<value><![CDATA[inner]]></value>
<comment><![CDATA[在指定的元素内部可以吸附]]></comment>
</option>
<option>
<value><![CDATA[outer]]></value>
<comment><![CDATA[在指定元素外部可以吸附]]></comment>
</option>
<option>
<value><![CDATA[both]]></value>
<comment><![CDATA[里面外面都可以吸附]]></comment>
</option>
</options>
</type>
</types>
<description><![CDATA[设定吸附时候的模式.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snapMode: 'outer' });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snapMode = $('.selector').draggable('option', 'snapMode');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snapMode', 'outer');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="snapTolerance" default="20">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[设定离目标对象的边多少像素的时候, 进行吸附.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ snap: true });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var snap = $('.selector').draggable('option', 'snap');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'snap', true);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="stack" default="false">
<types>
<type name="对象">
<description><![CDATA[{group: '.selector', min: 50} 其中, group制定的是一个选择器, 用来规定那些对象是一组. min是该组的最小z-index值]]><https://img.qb5200.com/download-x/description>
</type>
</types>
<description><![CDATA[一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ stack: { group: 'products', min: 50 } });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var stack = $('.selector').draggable('option', 'stack');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
<option name="zIndex" default="false">
<types>
<type name="整数">
</type>
</types>
<description><![CDATA[拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化]]></comment>
<code><![CDATA[$('.selector').draggable({ zIndex: 2700 });]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[获取属性值]]></comment>
<code><![CDATA[var zIndex = $('.selector').draggable('option', 'zIndex');]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[设置属性值]]></comment>
<code><![CDATA[$('.selector').draggable('option', 'zIndex', 2700);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</option>
</options>
<events>
<event name="start">
<trigger><![CDATA[拖动开始, 指鼠标按下, 开始移动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dragstart]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
start: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('dragstart', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
<event name="drag">
<trigger><![CDATA[拖动过程中鼠标移动]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: drag]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
drag: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('drag', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
<event name="stop">
<trigger><![CDATA[拖动结束]]></trigger>
<arguments>
<argument name="event">
<![CDATA[原生的浏览器事件.]]>
</argument>
<argument name="ui">
<![CDATA[JQuery的ui对象]]>
</argument>
</arguments>
<description><![CDATA[类型: dragstop]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<comment><![CDATA[初始化时设置事件]]></comment>
<code><![CDATA[$('.selector').draggable({
stop: function(event, ui) { alert(this); },
});]]></code>
<https://img.qb5200.com/download-x/demo>
<demo>
<comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]></comment>
<code><![CDATA[$(".selector").bind('dragstop', function(event, ui) {
alert(this);
});]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</event>
</events>
<methods>
<method name="destroy">
<description><![CDATA[完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('destroy');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="disable">
<description><![CDATA[将可拖动控件样式改变成为失效, 与enable对应.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('disable');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="enable">
<description><![CDATA[将可拖动控件样式改变为允许, 与disable对应.]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('enable');]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
<method name="option">
<arguments>
<argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument>
<argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument>
</arguments>
<description><![CDATA[获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]><https://img.qb5200.com/download-x/description>
<demos>
<demo>
<code><![CDATA[$(".selector").progressbar('option', optionName[, value]);]]></code>
<https://img.qb5200.com/download-x/demo>
<https://img.qb5200.com/download-x/demos>
</method>
</methods>
<summarize><![CDATA[addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次.
]]--></summarize>
</translate>
</project>
加载全部内容