jquery.ui.draggable中文文档

jquery.ui.draggable中文文档中文文档

暂时都使用xml格式, 方便传播, 制作电子书.

注意事项:

1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议

2. 格式中的所有项都是选填, 如果没有, 不写就是了.

3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上

<!--[CDATA[这中间写内容]]>

4. 翻译过程中, 一块对应的是一个<translate />标签.

<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的核心库]]></description>

<url><![CDATA[http://docs.jquery.com]]></url>

</depend>

<depend isitem="false">

<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当前偏移

<type name="布尔值"></type>

</types>

<description><![CDATA[用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通

过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变

拖动过程样式.

true表示ui-draggable样式被添加到该元素.

false表示ui-draggable样式不被添加到该元素.]]></description>

<demos>

<demo>

<comment><![CDATA[将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式]]>

</demo>

<demo>

<comment><![CDATA[将.selector选择器选中的可拖动控件的addClasses选项值设置为false.]]></comment>

<code><![CDATA[$('.selector').draggable('option', 'addClasses', false);]]></code>

</demo>

</demos>

</option>

<option name="appendTo" default="parent">

<types>

<type name="DOM元素" />

<comment><![CDATA[初始化]]></comment>

<code><![CDATA[$('.selector').draggable({ appendTo: 'body' });]]></code>

</demo>

<demo>

<comment><![CDATA[获取属性值]]></comment>

<code><![CDATA[var appendTo = $('.selector').draggable('option', 'appendTo');]]></code>

</demo>

<demo>

<comment><![CDATA[设置属性值]]></comment>

<code><![CDATA[$('.selector').draggable('option', 'appendTo', 'body');.]]></code>

<options>

<option>

<value><![CDATA[false]]></value>

<comment><![CDATA[既可以水平, 也可以垂直拖动.]]></comment>

</option>

</options>

</type>

<type name="String">

<options>

<option>

</option>

</options>

</type>

</types>

<description><![CDATA[约束拖动过程中的取向.]]></description>

<demos>

<demo>

<comment><![CDATA[初始化]]></comment>

<code><![CDATA[$('.selector').draggable({ axis: 'x' });]]></code>

</demo>

<code><![CDATA[$('.selector').draggable('option', 'axis', 'x');]]></code>

</demo>

</demos>

</option>

<option name="cancel" default=":input, option">

<types>

<type name="选择器">

</type>

</types>

<description><![CDATA[通过选择器指定这类元素不能被渲染成draggable控件.]]></description>

<comment><![CDATA[获取属性值]]></comment>

<code><![CDATA[var cancel = $('.selector').draggable('option', 'cancel');]]></code>

</demo>

<demo>

<comment><![CDATA[设置属性值]]></comment>

<code><![CDATA[$('.selector').draggable('option', 'cancel', 'button');]]></code>

</demo>

</demos>

</option>

<option name="connectToSortable" default="">