jquery.ui.draggable中文文档_Javascript教程-查字典教程网

摘要：注意事项:1.以下格式为既定的格式,为了统一性,需要修改时,大家商议2.格式中的所有项都是选填,如果没有,不写就是了.3.由于是XML格式的...

注意事项:

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

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

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

<--也就是可以用ui.position.top获取到该元素与父元素的top当前偏移

ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)]]></original>

</overview>

<types>

</types>

<description><![CDATA[用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.

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

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

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</option>

</options>

</type>

</option>

</option>

</options>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</type>

</option>

</option>

</option>

</options>

</type>

</type>

</option>

</options>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</option>

</option>

</options>

</type>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</option>

</option>

</options>

</type>

</type>

</types>

<description><![CDATA[阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应.

如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.]]></description>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</option>

</option>

</options>

</type>

</option>

</option>

</options>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

</relatives>

<types>

</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而已.]]></description>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<description><![CDATA[滚动条的敏感度.

下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.

鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.]]></description>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</option>

</option>

</option>

</options>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

<types>

</type>

</types>

<demos>

<demo>

</demo>

<demo>

</demo>

<demo>

</demo>

</demos>

</option>

</options>

<![CDATA[原生的浏览器事件.]]>

</argument>

<![CDATA[JQuery的ui对象]]>

</argument>

</arguments>

<demos>

<demo>

<code><![CDATA[$('.selector').draggable({

start: function(event, ui) { alert(this); },

});]]></code>

</demo>

<demo>

<code><![CDATA[$(".selector").bind('dragstart', function(event, ui) {

alert(this);

});]]></code>

</demo>

</demos>

</event>

<![CDATA[原生的浏览器事件.]]>

</argument>

<![CDATA[JQuery的ui对象]]>

</argument>

</arguments>

<demos>

<demo>

<code><![CDATA[$('.selector').draggable({

drag: function(event, ui) { alert(this); },

});]]></code>

</demo>

<demo>

<code><![CDATA[$(".selector").bind('drag', function(event, ui) {

alert(this);

});]]></code>

</demo>

</demos>

</event>

<![CDATA[原生的浏览器事件.]]>

</argument>

<![CDATA[JQuery的ui对象]]>

</argument>

</arguments>

<demos>

<demo>

<code><![CDATA[$('.selector').draggable({

stop: function(event, ui) { alert(this); },

});]]></code>

</demo>

<demo>

<code><![CDATA[$(".selector").bind('dragstop', function(event, ui) {

alert(this);

});]]></code>

</demo>

</demos>

</event>

</events>

<demos>

<demo>

</demo>

</demos>

</method>

<demos>

<demo>

</demo>

</demos>

</method>

<demos>

<demo>

</demo>

</demos>

</method>

</arguments>

<demos>

<demo>

</demo>

</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>