首页 > 语言 > JavaScript > 正文

jquery.ui.draggable中文文档(原文翻译)

2024-05-06 14:33:34
字体:
来源:转载
供稿:网友

[原文翻译]
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有偏移的.)
[选项]
addClasses:
[类型]Boolean(布尔值)
[默认值]true
[产生影响]
   用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
   true表示ui-draggable样式被添加到该元素.
   false表示ui-draggable样式不被添加到该元素.
[代码示例]draggable其他选项的初始化, 获取属性值, 设置属性值部分除有特殊功能, 不再赘述, 仅粘贴代码.
   [初始化]
   $('.selector').draggable({ addClasses: false });
   将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式
   [获取属性值]
   var addClasses = $('#draggable').draggable('option', 'addClasses');
   获取.selector选择器选中的可拖动控件的addClasses选项的值.
   [设置属性值]
   $('.selector').draggable('option', 'addClasses', false);
   将.selector选择器选中的可拖动控件的addClasses选项值设置为false.
appendTo:
[类型]Element, Selector(HTML元素对象或选择器)
[默认值]'parent' 父元素
[产生影响]
   用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
[代码示例]
   [初始化]
   $('.selector').draggable({ appendTo: 'body' });
   [获取属性值]
   //getter
   var appendTo = $('.selector').draggable('option', 'appendTo');
   [设置属性值]
   //setter
   $('.selector').draggable('option', 'appendTo', 'body');.

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选