概述
在任何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. JavaSE (五)面向对象 -- 概述

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 目录 一.面向对象的主线 二.面向对象 VS 面向过程 三 . java最基本的两个要素 - 类和对象 ...

  2. 【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建

    0. 前言 在上一节中,我们创建了一个项目架构,后续的项目都会在那个架构上做补充. 1. Nacos 1.1 简介 Nacos可以用来发现.配置和管理微服务.提供了一组简单易用的特性集,可以快速实现动 ...

  3. Java实现 蓝桥杯VIP 算法训练 连通分块(并查集)

    试题 算法训练 连通分块 资源限制 时间限制:200ms 内存限制:8.0MB 问题描述 连通分块 输入格式 输入的第一行包含两个整数n, m n代表图中的点的个数,m代表边的个数 接下来m行,每行2 ...

  4. Java实现 LeetCode 46 全排列

    46. 全排列 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2] ...

  5. Java实现One-way traffic(单向交通)

    One-way traffic In a certain town there are n intersections connected by two- and one-way streets. T ...

  6. TZOJ 车辆拥挤相互往里走

    102路公交车是crq经常坐的,闲来无聊,他想知道最高峰时车上有多少人,他发现这辆车只留一个门上下人,于是他想到了一个办法,上车时先数一下车上人员数目(crq所上的站点总是人不太多),之后就坐在车门口 ...

  7. 【JAVA习题三十】求0—7所能组成的奇数个数

    package erase; public class 求0到7所能组成的奇数个数 { public static void main(String[] args) { /* * 求0—7所能组成的奇 ...

  8. pip常出问题的操作

    pip 是一个 Python 包安装与管理工具. 以pip安装yaml为主: 1.更新pip 打开cmd命令,安装yaml包,输入pip install pyyaml,提示pip已过期 更新pip版本 ...

  9. linux安装redis-6.0.1单机和集群

    redis作为一个直接操作内存的key-value存储系统,也是一个支持数据持久化的Nosql数据库,具有非常快速的读写速度,可用于数据缓存.消息队列等. 一.单机版安装 1.下载redis 进入re ...

  10. STM32的8*8点阵屏开发(小项目)

    基础认识 实现效果 项目实现STM32点阵屏的操作,自动更改显示内容和串口控制显示内容 STM32上电后: 1)   程序将进行行和列的刷新 2)   自动递增显示0-9变化 3)   进行矩形由内向 ...