博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery UI - draggable(转)
阅读量:5807 次
发布时间:2019-06-18

本文共 8983 字,大约阅读时间需要 29 分钟。

1 ·概述  2 在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。  3 官方示例地址:http://jqueryui.com/demos/draggable/  4   5 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象  6 ui.helper - 表示被拖拽的元素的JQuery对象  7 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}  8 ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}  9  10 ·参数(参数名 : 参数类型 : 默认值) 11 addClasses : Boolean : true 12   如果设置成false,将在加载时阻止ui-draggable样式的加载。 13   当有很多对象要加载draggable()插件的情况下,这将对性能有极大的优化。 14   初始: $('.selector').draggable({ addClasses: false }); 15   获取: var addClasses = $('.selector').draggable('option', 'addClasses'); 16   设置: $('.selector').draggable('option', 'addClasses', false); 17  18 appendTo : Element,Selector : 'parent' 19   The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable. 20   初始:$('.selector').draggable({ appendTo: 'body' }); 21   获取:var appendTo = $('.selector').draggable('option', 'appendTo'); 22   设置:$('.selector').draggable('option', 'appendTo', 'body'); 23  24 axis : String : false 25   约束拖动的动作只能在X轴或Y轴上执行,可选值:'x', 'y'。 26   初始:$('.selector').draggable({ axis: 'x' }); 27   获取:var axis = $('.selector').draggable('option', 'axis'); 28   设置:$('.selector').draggable('option', 'axis', 'x'); 29  30 cancel : Selector : ':input,option' 31   防止在指定的对象上开始拖动。 32   初始:$('.selector').draggable({ cancel: 'button' }); 33   获取:var cancel = $('.selector').draggable('option', 'cancel'); 34   设置:$('.selector').draggable('option', 'cancel', 'button'); 35  36 connectToSortable : Selector : false 37   允许draggable被拖拽到指定的sortables中,如果使用此选项helper属性必须设置成clone才能正常工作。 38   初始:$('.selector').draggable({ connectToSortable: 'ul#myList' }); 39   获取:var connectToSortable = $('.selector').draggable('option', 'connectToSortable'); 40   设置:$('.selector').draggable('option', 'connectToSortable', 'ul#myList'); 41  42 containment : Selector,Element,String, Array : false  43   强制draggable只允许在指定元素或区域的范围内移动,可选值:'parent', 'document', 'window', [x1, y1, x2, y2]. 44   初始:$('.selector').draggable({ containment: 'parent' }); 45   获取:var containment = $('.selector').draggable('option', 'containment'); 46   设置:$('.selector').draggable('option', 'containment', 'parent'); 47  48 cursor : String : 'auto' 49   指定在做拖拽动作时,鼠标的CSS样式。 50   初始:$('.selector').draggable({ cursor: 'crosshair' }); 51   获取:var cursor = $('.selector').draggable('option', 'cursor'); 52   设置:$('.selector').draggable('option', 'cursor', 'crosshair'); 53  54 cursorAt : Object : false 55   当开始移动时,鼠标定位在的某个位置上(最多两个方向)。可选值:{ top, left, right, bottom }. 56   初始:$('.selector').draggable({ cursorAt: { left: 5 } }); 57   获取:var cursorAt = $('.selector').draggable('option', 'cursorAt'); 58   设置:$('.selector').draggable('option', 'cursorAt', { left: 5 }); 59  60 delay : Integer : 0 61   当鼠标点下后,延迟指定时间后才开始激活拖拽动作(单位:毫秒)。此选项可以用来防止不想要的拖累元素时的误点击。 62   初始:$('.selector').draggable({ delay: 500 }); 63   获取:var delay = $('.selector').draggable('option', 'delay'); 64   设置:$('.selector').draggable('option', 'delay', 500); 65  66 distance : Integer : 1 67   当鼠标点下后,只有移动指定像素后才开始激活拖拽动作。 68   初始:$('.selector').draggable({ distance: 30 }); 69   获取:var distance = $('.selector').draggable('option', 'distance'); 70   设置:$('.selector').draggable('option', 'distance', 30); 71  72 grid : Array : false  73   拖拽元素时,只能以指定大小的方格进行拖动。可选值:[x,y] 74   初始:$('.selector').draggable({ grid: [50, 20] }); 75   获取:var grid = $('.selector').draggable('option', 'grid'); 76   设置:$('.selector').draggable('option', 'grid', [50, 20]); 77  78 handle : Element, Selector : false  79   限制只能在拖拽元素内的指定元素开始拖拽。 80   初始:$('.selector').draggable({ handle: 'h2' }); 81   获取:var handle = $('.selector').draggable('option', 'handle'); 82   设置:$('.selector').draggable('option', 'handle', 'h2'); 83  84 helper : String, Function : 'original' 85   拖拽元素时的显示方式。(如果是函数,必须返回值是一个DOM元素)可选值:'original', 'clone', Function  86   初始:$('.selector').draggable({ helper: 'clone' }); 87   获取:var helper = $('.selector').draggable('option', 'helper'); 88   设置:$('.selector').draggable('option', 'helper', 'clone'); 89  90 iframeFix : Boolean, Selector : false 91   可防止当mouseover事件触发拖拽动作时,移动过iframes并捕获到它(内部内容),如果设置成true,则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器,则屏蔽层会覆盖相匹配的iframe。 92   初始:$('.selector').draggable({ iframeFix: true }); 93   获取:var iframeFix = $('.selector').draggable('option', 'iframeFix'); 94   设置:$('.selector').draggable('option', 'iframeFix', true); 95  96 opacity : Float : false 97   当元素开始拖拽时,改变元素的透明度。 98   初始:$('.selector').draggable({ opacity: 0.35 }); 99   获取:var opacity = $('.selector').draggable('option', 'opacity');100   设置:$('.selector').draggable('option', 'opacity', 0.35);101 102 refreshPositions : Boolean : false103   如果设置成true,所有移动过程中的坐标都会被记录。(注意:此功能将影响性能)104   初始:$('.selector').draggable({ refreshPositions: true });105   获取:var refreshPositions = $('.selector').draggable('option', 'refreshPositions');106   设置:$('.selector').draggable('option', 'refreshPositions', true);107 108 revert : Boolean, String : false109   当元素拖拽结束后,元素回到原来的位置。110   初始:$('.selector').draggable({ revert: true });111   获取:var revert = $('.selector').draggable('option', 'revert');112   设置:$('.selector').draggable('option', 'revert', true);113 114 revertDuration : Integer : 500115   当元素拖拽结束后,元素回到原来的位置的时间。(单位:毫秒)116   初始:$('.selector').draggable({ revertDuration: 1000 });117   获取:var revertDuration = $('.selector').draggable('option', 'revertDuration');118   设置:$('.selector').draggable('option', 'revertDuration', 1000);119 120 scope : String : 'default'121   设置元素只允许拖拽到具有相同scope值的元素。122   初始:$('.selector').draggable({ scope: 'tasks' });123   获取:var scope = $('.selector').draggable('option', 'scope');124   设置:$('.selector').draggable('option', 'scope', 'tasks');125 126 scroll : Boolean : true127   如果设置为true,元素拖拽至边缘时,父容器将自动滚动。128   初始:$('.selector').draggable({ scroll: false });129   获取:var scroll = $('.selector').draggable('option', 'scroll');130   设置:$('.selector').draggable('option', 'scroll', false);131 132 scrollSensitivity : Integer : 20133   当元素拖拽至边缘时,父窗口一次滚动的像素。134   初始:$('.selector').draggable({ scrollSensitivity: 40 });135   获取:var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');136   设置:$('.selector').draggable('option', 'scrollSensitivity', 40);137 138 scrollSpeed : Integer : 20139   当元素拖拽至边缘时,父窗口滚动的速度。140   初始:$('.selector').draggable({ scrollSpeed: 40 });141   获取:var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');142   设置:$('.selector').draggable('option', 'scrollSpeed', 40);143 144 snap : Boolean, Selector : false145   当设置为true或元素标签时,元素拖动到其它元素的边缘时,会自动吸附其它元素。146   初始:$('.selector').draggable({ snap: 'span' });147   获取:var snap = $('.selector').draggable('option', 'snap');148   设置:$('.selector').draggable('option', 'snap', 'span');149 150 snapMode : String : 'both'151   确定拖拽的元素吸附的模式。可选值:'inner', 'outer', 'both'152   初始:$('.selector').draggable({ snapMode: 'outer' });153   获取:var snapMode = $('.selector').draggable('option', 'snapMode');154   设置:$('.selector').draggable('option', 'snapMode', 'outer');155 156 snapTolerance : Integer : 20157   确定拖拽的元素移动至其它元素多少像素的距离时,发生吸附的动作。158   初始:$('.selector').draggable({ snapTolerance: 40 });159   获取:var snapTolerance = $('.selector').draggable('option', 'snapTolerance');160   设置:$('.selector').draggable('option', 'snapTolerance', 40);161 162 stack : Object : false163   Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.164   初始:$('.selector').draggable({ stack: { group: 'products', min: 50 } });165   获取:var stack = $('.selector').draggable('option', 'stack');166   设置:$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });167 168 zIndex : Integer : false169   控制当拖拽元素时,改变元素的z-index值。170   初始:$('.selector').draggable({ zIndex: 2700 });171   获取:var zIndex = $('.selector').draggable('option', 'zIndex');172   设置:$('.selector').draggable('option', 'zIndex', 2700);173 174 175 ·事件176 start177   当鼠标开始拖拽时,触发此事件。178   初始:$('.selector').draggable({ start: function(event, ui){...} });179   绑定:$('.selector').bind('dragstart', function(event, ui){...});180 181 drag182   当鼠标拖拽移动时,触发此事件。183   初始:$('.selector').draggable({ drag: function(event, ui){...} });184   绑定:$('.selector').bind('drag', function(event, ui){...});185 186 stop187   当鼠标松开时,触发此事件。188   初始:$('.selector').draggable({ stop: function(event, ui){...} });189   绑定:$('.selector').bind('dragstop', function(event, ui){...});190 191 192 ·方法193 destory194   从元素中移除拖拽功能。195   用法:.draggable( 'destroy' )196 197 disable198   禁用元素的拖拽功能。199   用法:.draggable( 'disable' )200 201 enable202   启用元素的拖拽功能。203   用法:.draggable( 'enable' )204 205 option206   获取或设置元素的参数。207   用法:.draggable( 'option' , optionName , [value] )

 

转载于:https://www.cnblogs.com/xingmeng/p/4078758.html

你可能感兴趣的文章
C# API中的模型和它们的接口设计
查看>>
两面看问题:区块链与伦理人权
查看>>
7道常见的数据分析面试题
查看>>
物联网技术周报第 137 期: 使用 Amazon FreeRTOS 和 ESP32 将设备连接到云端
查看>>
最新的Java SE平台和JDK版本发布计划
查看>>
REST是新SOAP?
查看>>
OpsRamp推出AIOps推理引擎
查看>>
org.jasig.cas.client校验
查看>>
[leetcode]Longest Increasing Subsequence
查看>>
PHP_底层分析
查看>>
js-csp 可以开始尝试了
查看>>
【笔记】Network Evaluation——零碎
查看>>
web 安全入门
查看>>
【腾讯Bugly干货分享】H5 视频直播那些事
查看>>
读取@RequestMapping生成路径列表
查看>>
php处理Excel
查看>>
Erlang/Elixir: 使用 Leex 和 Yecc 解析领域语言(DSL)
查看>>
silm框架初使用
查看>>
Golang transfer file with socket
查看>>
Centos 添加pcntl扩展程序
查看>>