概述
在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。
官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象
ui.helper - 表示被拖拽的元素的JQuery对象
ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}
ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ·参数(参数名 : 参数类型 : 默认值)
addClasses : Boolean : true
如果设置成false,将在加载时阻止ui-draggable样式的加载。
当有很多对象要加载draggable()插件的情况下,这将对性能有极大的优化。
初始: $('.selector').draggable({ addClasses: false });
获取: var addClasses = $('.selector').draggable('option', 'addClasses');
设置: $('.selector').draggable('option', 'addClasses', false); appendTo : Element,Selector : 'parent'
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.
初始:$('.selector').draggable({ appendTo: 'body' });
获取:var appendTo = $('.selector').draggable('option', 'appendTo');
设置:$('.selector').draggable('option', 'appendTo', 'body'); axis : String : false
约束拖动的动作只能在X轴或Y轴上执行,可选值:'x', 'y'。
初始:$('.selector').draggable({ axis: 'x' });
获取:var axis = $('.selector').draggable('option', 'axis');
设置:$('.selector').draggable('option', 'axis', 'x'); cancel : Selector : ':input,option'
防止在指定的对象上开始拖动。
初始:$('.selector').draggable({ cancel: 'button' });
获取:var cancel = $('.selector').draggable('option', 'cancel');
设置:$('.selector').draggable('option', 'cancel', 'button'); connectToSortable : Selector : false
允许draggable被拖拽到指定的sortables中,如果使用此选项helper属性必须设置成clone才能正常工作。
初始:$('.selector').draggable({ connectToSortable: 'ul#myList' });
获取:var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
设置:$('.selector').draggable('option', 'connectToSortable', 'ul#myList'); containment : Selector,Element,String, Array : false
强制draggable只允许在指定元素或区域的范围内移动,可选值:'parent', 'document', 'window', [x1, y1, x2, y2].
初始:$('.selector').draggable({ containment: 'parent' });
获取:var containment = $('.selector').draggable('option', 'containment');
设置:$('.selector').draggable('option', 'containment', 'parent'); cursor : String : 'auto'
指定在做拖拽动作时,鼠标的CSS样式。
初始:$('.selector').draggable({ cursor: 'crosshair' });
获取:var cursor = $('.selector').draggable('option', 'cursor');
设置:$('.selector').draggable('option', 'cursor', 'crosshair'); cursorAt : Object : false
当开始移动时,鼠标定位在的某个位置上(最多两个方向)。可选值:{ top, left, right, bottom }.
初始:$('.selector').draggable({ cursorAt: { left: } });
获取:var cursorAt = $('.selector').draggable('option', 'cursorAt');
设置:$('.selector').draggable('option', 'cursorAt', { left: }); delay : Integer :
当鼠标点下后,延迟指定时间后才开始激活拖拽动作(单位:毫秒)。此选项可以用来防止不想要的拖累元素时的误点击。
初始:$('.selector').draggable({ delay: });
获取:var delay = $('.selector').draggable('option', 'delay');
设置:$('.selector').draggable('option', 'delay', ); distance : Integer :
当鼠标点下后,只有移动指定像素后才开始激活拖拽动作。
初始:$('.selector').draggable({ distance: });
获取:var distance = $('.selector').draggable('option', 'distance');
设置:$('.selector').draggable('option', 'distance', ); grid : Array : false
拖拽元素时,只能以指定大小的方格进行拖动。可选值:[x,y]
初始:$('.selector').draggable({ grid: [, ] });
获取:var grid = $('.selector').draggable('option', 'grid');
设置:$('.selector').draggable('option', 'grid', [, ]); handle : Element, Selector : false
限制只能在拖拽元素内的指定元素开始拖拽。
初始:$('.selector').draggable({ handle: 'h2' });
获取:var handle = $('.selector').draggable('option', 'handle');
设置:$('.selector').draggable('option', 'handle', 'h2'); helper : String, Function : 'original'
拖拽元素时的显示方式。(如果是函数,必须返回值是一个DOM元素)可选值:'original', 'clone', Function
初始:$('.selector').draggable({ helper: 'clone' });
获取:var helper = $('.selector').draggable('option', 'helper');
设置:$('.selector').draggable('option', 'helper', 'clone'); iframeFix : Boolean, Selector : false
可防止当mouseover事件触发拖拽动作时,移动过iframes并捕获到它(内部内容),如果设置成true,则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器,则屏蔽层会覆盖相匹配的iframe。
初始:$('.selector').draggable({ iframeFix: true });
获取:var iframeFix = $('.selector').draggable('option', 'iframeFix');
设置:$('.selector').draggable('option', 'iframeFix', true); opacity : Float : false
当元素开始拖拽时,改变元素的透明度。
初始:$('.selector').draggable({ opacity: 0.35 });
获取:var opacity = $('.selector').draggable('option', 'opacity');
设置:$('.selector').draggable('option', 'opacity', 0.35); refreshPositions : Boolean : false
如果设置成true,所有移动过程中的坐标都会被记录。(注意:此功能将影响性能)
初始:$('.selector').draggable({ refreshPositions: true });
获取:var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
设置:$('.selector').draggable('option', 'refreshPositions', true); revert : Boolean, String : false
当元素拖拽结束后,元素回到原来的位置。
初始:$('.selector').draggable({ revert: true });
获取:var revert = $('.selector').draggable('option', 'revert');
设置:$('.selector').draggable('option', 'revert', true); revertDuration : Integer :
当元素拖拽结束后,元素回到原来的位置的时间。(单位:毫秒)
初始:$('.selector').draggable({ revertDuration: });
获取:var revertDuration = $('.selector').draggable('option', 'revertDuration');
设置:$('.selector').draggable('option', 'revertDuration', ); scope : String : 'default'
设置元素只允许拖拽到具有相同scope值的元素。
初始:$('.selector').draggable({ scope: 'tasks' });
获取:var scope = $('.selector').draggable('option', 'scope');
设置:$('.selector').draggable('option', 'scope', 'tasks'); scroll : Boolean : true
如果设置为true,元素拖拽至边缘时,父容器将自动滚动。
初始:$('.selector').draggable({ scroll: false });
获取:var scroll = $('.selector').draggable('option', 'scroll');
设置:$('.selector').draggable('option', 'scroll', false); scrollSensitivity : Integer :
当元素拖拽至边缘时,父窗口一次滚动的像素。
初始:$('.selector').draggable({ scrollSensitivity: });
获取:var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
设置:$('.selector').draggable('option', 'scrollSensitivity', ); scrollSpeed : Integer :
当元素拖拽至边缘时,父窗口滚动的速度。
初始:$('.selector').draggable({ scrollSpeed: });
获取:var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
设置:$('.selector').draggable('option', 'scrollSpeed', ); snap : Boolean, Selector : false
当设置为true或元素标签时,元素拖动到其它元素的边缘时,会自动吸附其它元素。
初始:$('.selector').draggable({ snap: 'span' });
获取:var snap = $('.selector').draggable('option', 'snap');
设置:$('.selector').draggable('option', 'snap', 'span'); snapMode : String : 'both'
确定拖拽的元素吸附的模式。可选值:'inner', 'outer', 'both'
初始:$('.selector').draggable({ snapMode: 'outer' });
获取:var snapMode = $('.selector').draggable('option', 'snapMode');
设置:$('.selector').draggable('option', 'snapMode', 'outer'); snapTolerance : Integer :
确定拖拽的元素移动至其它元素多少像素的距离时,发生吸附的动作。
初始:$('.selector').draggable({ snapTolerance: });
获取:var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
设置:$('.selector').draggable('option', 'snapTolerance', ); stack : Object : false
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.
初始:$('.selector').draggable({ stack: { group: 'products', min: } });
获取:var stack = $('.selector').draggable('option', 'stack');
设置:$('.selector').draggable('option', 'stack', { group: 'products', min: }); zIndex : Integer : false
控制当拖拽元素时,改变元素的z-index值。
初始:$('.selector').draggable({ zIndex: });
获取:var zIndex = $('.selector').draggable('option', 'zIndex');
设置:$('.selector').draggable('option', 'zIndex', ); ·事件
start
当鼠标开始拖拽时,触发此事件。
初始:$('.selector').draggable({ start: function(event, ui){...} });
绑定:$('.selector').bind('dragstart', function(event, ui){...}); drag
当鼠标拖拽移动时,触发此事件。
初始:$('.selector').draggable({ drag: function(event, ui){...} });
绑定:$('.selector').bind('drag', function(event, ui){...}); stop
当鼠标松开时,触发此事件。
初始:$('.selector').draggable({ stop: function(event, ui){...} });
绑定:$('.selector').bind('dragstop', function(event, ui){...}); ·方法
destory
从元素中移除拖拽功能。
用法:.draggable( 'destroy' ) disable
禁用元素的拖拽功能。
用法:.draggable( 'disable' ) enable
启用元素的拖拽功能。
用法:.draggable( 'enable' ) option
获取或设置元素的参数。
用法:.draggable( 'option' , optionName , [value] )

JQuery UI - draggable参数中文详细说明的更多相关文章

  1. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  2. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  3. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  4. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  5. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  6. jquery UI Draggable和Droppable 案例

    <html> <head><title>draggable</title> <script type="text/javascript& ...

  7. Jquery ui draggable在chrome和ie7下的bug

    当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...

  8. 【转】ffmpeg参数中文详细解释

    感谢“大神”的无私奉献:http://blog.csdn.net/leixiaohua1020/article/details/15811977 a) 通用选项 -L license-h 帮助-fro ...

  9. 转,ffmpeg参数中文详细解释

    a) 通用选项 -L license-h 帮助-fromats 显示可用的格式,编解码的,协议的...-f fmt 强迫采用格式fmt-I filename 输入文件-y 覆盖输出文件-t durat ...

随机推荐

  1. 分布式事务专题笔记(一) 基础概念 与 CAP 理论

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.基础概念 1.什么是事务 什么是事务?举个生活中的例子:你去小卖铺买东西,“一手交钱,一手交货”就是 ...

  2. 高性能可扩展mysql 笔记(五)商品实体、订单实体、DB规划

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.商品模块 ​ 商品实体信息所存储的表包括: 品牌信息表: create table `brand_i ...

  3. Java实现 LeetCode 762 二进制表示中质数个计算置位(位运算+JDK的方法)

    762. 二进制表示中质数个计算置位 给定两个整数 L 和 R ,找到闭区间 [L, R] 范围内,计算置位位数为质数的整数个数. (注意,计算置位代表二进制表示中1的个数.例如 21 的二进制表示 ...

  4. Java实现 LeetCode 441 排列硬币

    441. 排列硬币 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整 ...

  5. Java实现 LeetCode 436 寻找右区间

    436. 寻找右区间 给定一组区间,对于每一个区间 i,检查是否存在一个区间 j,它的起始点大于或等于区间 i 的终点,这可以称为 j 在 i 的"右侧". 对于任何区间,你需要存 ...

  6. Java实现 蓝桥杯VIP 算法提高 字符串比较

    算法提高 字符串比较 时间限制:1.0s 内存限制:512.0MB 独立实现标准字符串库的strcmp函数,即字符串比较函数,从键盘输入两个字符串,按字典序比较大小,前者大于后者输出1,前者小于后者输 ...

  7. Java实现LeetCode_0001_Two Sum

    import java.util.Arrays; import java.util.Scanner; public class TwoSum_1 { public static void main(S ...

  8. java代码(8) ---guava字符串工具

    guava字符串工具 一.Joiner 根据指定的分隔符把字符串连接在一起,MapJoiner执行相同的操作,但是针对Map的key和value 分析源码可知:该类构造方法被private修饰,无法直 ...

  9. Mybatis多表操作

    一:引言 在学习完前面的mybatis基本语法后,大家都有个认知,这个Mybatis太强大了,比之前使用JDBC写方便多了,但是你们当初在使用原生JDBC写SQL查询的时候有没有遇到过多表查询呢?肯定 ...

  10. Windows下虚拟机Linux(CentOS8)扩容设置 - 磁盘扩容中的坑和解决方法

    摘要:[原创]转载请注明作者Johnthegreat和本文链接 由于虚拟机空间不足,为了避免重装虚拟机,做了一次无损扩容.   过程中的报错如下: [root@localhost ~]# pvcrea ...