jQuery UI API - 可拖拽小部件(Draggable Widget)(转)
所属类别
用法
描述:允许使用鼠标移动元素。
版本新增:1.0
依赖:
注释:让被选元素可被鼠标拖拽。如果您不只是拖拽,而是拖拽 & 放置,请查看 jQuery UI 可放置(Droppable)插件,为可拖拽元素提供了一个放置目标。
快速导航
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
addClasses | Boolean | 如果设置为 false ,将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时,这么设置有利于性能优化。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ addClasses: false }); 在初始化后,获取或设置 // getter |
true |
appendTo | jQuery 或 Element 或 Selector 或 String | 当拖拽时,draggable 助手(helper)要追加到哪一个元素。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ appendTo: "body" }); 在初始化后,获取或设置 // getter |
"parent" |
axis | String | 约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值:"x" , "y" 。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ axis: "x" }); 在初始化后,获取或设置 // getter |
false |
cancel | Selector | 防止从指定的元素上开始拖拽。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ cancel: ".title" }); 在初始化后,获取或设置 // getter |
"input, textarea, button, select, option" |
connectToSortable | Selector | 允许 draggable 放置在指定的 sortable 上。如果使用了该选项,一个 draggable 可被放置在一个 sortable 列表上,然后成为列表的一部分。注意:helper 选项必须设置为 "clone" ,以便更好地工作。必须包含 可排序小部件(Sortable Widget)。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); 在初始化后,获取或设置 // getter |
false |
containment | Selector 或 Element 或 String 或 Array | 约束在指定元素或区域的边界内拖拽。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ containment: "parent" }); 在初始化后,获取或设置 // getter |
false |
cursor | String | 拖拽操作期间的 CSS 光标。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ cursor: "crosshair" }); 在初始化后,获取或设置 // getter |
"auto" |
cursorAt | Object | 设置拖拽助手(helper)相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出:{ top, left, right, bottom } 。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ cursorAt: { left: 5 } }); 在初始化后,获取或设置 // getter |
false |
delay | Number | 鼠标按下后直到拖拽开始为止的时间,以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ delay: 300 }); 在初始化后,获取或设置 // getter |
0 |
disabled | Boolean | 如果设置为 true ,则禁用该 draggable。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ disabled: true }); 在初始化后,获取或设置 // getter |
false |
distance | Number | 鼠标按下后拖拽开始前必须移动的距离,以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ distance: 10 }); 在初始化后,获取或设置 // getter |
1 |
grid | Array | 对齐拖拽助手(helper)到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ] 。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ grid: [ 50, 20 ] }); 在初始化后,获取或设置 // getter |
false |
handle | Selector 或 Element | 如果指定了该选项,则限制开始拖拽,除非鼠标在指定的元素上按下。只有可拖拽(draggable)元素的后代元素才允许被拖拽。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ handle: "h2" }); 在初始化后,获取或设置 // getter |
false |
helper | String 或 Function() | 允许一个 helper 元素用于拖拽显示。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ helper: "clone" }); 在初始化后,获取或设置 // getter |
"original" |
iframeFix | Boolean 或 Selector | 防止拖拽期间 iframes 捕捉鼠标移动(mousemove )事件。在与 cursorAt 选项结合使用时,或鼠标光标未覆盖在助手(helper)上时,非常有用。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ iframeFix: true }); 在初始化后,获取或设置 // getter |
false |
opacity | Number | 当被拖拽时助手(helper)的不透明度。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ opacity: 0.35 }); 在初始化后,获取或设置 // getter |
false |
refreshPositions | Boolean | 如果设置为 true ,在每次鼠标移动(mousemove)时都会计算所有可放置的位置。注意:这解决了高度动态的问题,但是明显降低了性能。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ refreshPositions: true }); 在初始化后,获取或设置 // getter |
false |
revert | Boolean 或 String 或 Function() | 当拖拽停止时,元素是否还原到它的开始位置。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ revert: true }); 在初始化后,获取或设置 // getter |
false |
revertDuration | Number | 还原(revert)动画的持续时间,以毫秒计。如果 revert 选项是 false 则忽略。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ revertDuration: 200 }); 在初始化后,获取或设置 // getter |
500 |
scope | String | 用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ scope: "tasks" }); 在初始化后,获取或设置 // getter |
"default" |
scroll | Boolean | 如果设置为 true ,当拖拽时容器会自动滚动。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ scroll: false }); 在初始化后,获取或设置 // getter |
true |
scrollSensitivity | Number | 从要滚动的视区边缘起的距离,以像素计。距离是相对于指针的,不是相对于 draggable。如果 scroll 选项是 false 则忽略。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ scrollSensitivity: 100 }); 在初始化后,获取或设置 // getter |
20 |
scrollSpeed | Number | 当鼠标指针获取到在 scrollSensitivity 距离内时,窗体滚动的速度。如果scroll 选项是 false 则忽略。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ scrollSpeed: 100 }); 在初始化后,获取或设置 // getter |
20 |
snap | Boolean 或 Selector | 元素是否对齐到其他元素。
支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).draggable({ snap: true }); 在初始化后,获取或设置 // getter |
false |
snapMode | String | 决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值:"inner" 、"outer" 、"both" 。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ snapMode: "inner" }); 在初始化后,获取或设置 // getter |
"both" |
snapTolerance | Number | 从要发生对齐的对齐元素边缘起的距离,以像素计。如果 snap 选项是 false 则忽略。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ snapTolerance: 30 }); 在初始化后,获取或设置 // getter |
20 |
stack | Selector | 控制匹配选择器(selector)的元素集合的 z-index,总是在当前拖拽项的前面,在类似窗口管理器这样的事物中非常有用。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ stack: ".products" }); 在初始化后,获取或设置 // getter |
false |
zIndex | Number | 当被拖拽时,助手(helper)的 Z-index。
代码实例: 初始化带有指定 $( ".selector" ).draggable({ zIndex: 100 }); 在初始化后,获取或设置 // getter |
false |
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).draggable( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 draggable。
代码实例: 调用 disable 方法: $( ".selector" ).draggable( "disable" ); |
enable() | jQuery (plugin only) | 启用 draggable。
代码实例: 调用 enable 方法: $( ".selector" ).draggable( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).draggable( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 draggable 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).draggable( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 draggable 选项的值。
代码实例: 调用该方法: $( ".selector" ).draggable( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 draggable 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).draggable( "option", { disabled: true } ); |
widget() | jQuery | 返回一个包含 draggable 元素的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).draggable( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | dragcreate | 当 draggable 被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的 draggable: $( ".selector" ).draggable({ 绑定一个事件监听器到 dragcreate 事件: $( ".selector" ).on( "dragcreate", function( event, ui ) {} ); |
drag( event, ui ) | drag | 在拖拽期间当鼠标移动时触发。
代码实例: 初始化带有指定 drag 回调的 draggable: $( ".selector" ).draggable({ 绑定一个事件监听器到 drag 事件: $( ".selector" ).on( "drag", function( event, ui ) {} ); |
start( event, ui ) | dragstart | 当拖拽开始时触发。
代码实例: 初始化带有指定 start 回调的 draggable: $( ".selector" ).draggable({ 绑定一个事件监听器到 dragstart 事件: $( ".selector" ).on( "dragstart", function( event, ui ) {} ); |
stop( event, ui ) | dragstop | 当拖拽停止时触发。
代码实例: 初始化带有指定 stop 回调的 draggable: $( ".selector" ).draggable({ 绑定一个事件监听器到 dragstop 事件: $( ".selector" ).on( "dragstop", function( event, ui ) {} ); |
实例
一个简单的 jQuery UI 可拖拽小部件(Draggable Widget)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>可拖拽小部件(Draggable Widget)演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
#draggable {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body> <div id="draggable">请拖拽我!</div> <script>
$( "#draggable" ).draggable();
</script> </body>
</html>
jQuery UI API - 可拖拽小部件(Draggable Widget)(转)的更多相关文章
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 原生API实现拖拽上传文件实践
功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- [转自大神]js拖拽小总结
https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...
- JS实现拖拽小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Flutter 拖拽控件Draggable
Flutter提供了强大的拖拽控件,可以灵活定制,并且非常简单.下面作一个拖拽的案例. Draggable Widget Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就 ...
- jquery dragsort table实现拖拽排序
转自:http://haoningabc.iteye.com/blog/1593640 dragsort官网地址:http://dragsort.codeplex.com/ html代码如下(需引入j ...
随机推荐
- css调整图片位置布局
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE wml PUBLIC "-//WAP ...
- iOS 动画效果。简单的提示消失
UILabel * label1 = [[UILabel alloc]initWithFrame:CGRectMake(, , , )]; label1.text = @"qingjoin& ...
- javascript常用的公共方法
附件下载 //摘要:将指定字符串中的格式项替换为指定数组中相应对象的字符串表示形式. //参数:复合格式字符串. //返回结果:format的副本,其中的格式项已替换为 args 中相应对象的字符串表 ...
- 微软BI 之SSRS 系列 - 不显示 Pie Chart 饼图上 0% 的数据
SSRS 小技巧系列专门用来记录 SSRS 报表开发过程中常用的小技巧 - 效果图 - 0% 的标签数据不需要显示出来. 效果图 - 正常的效果. 解决方法 - 使用 IIF 条件判断,如果计算值为 ...
- 跟我学AngularJS:全局变量设置之value vs constant vs rootscope vs 服务[转]
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文要讲讲Angular中value vs. constant以及全局变量的设置 本教程 ...
- Searching for equivalent of FileNotFoundError in Python 2
I created a class named Options. It works fine but not not with Python 2. And I want it to work on b ...
- 使用迭代器遍历List的时候修改List报ConcurrentModificationException异常原因分析
在使用Iterator来迭代遍历List的时候如果修改该List对象,则会报java.util.ConcurrentModificationException异常,下面看一个例子演示: package ...
- 转 PHP常用正则表达式汇总
1. 平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用: 2. "^\d+$" //非负整数(正整数 + 0) 3. "^[0 ...
- J2EE开发之三种项目架构
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6285069.html 在我们开发项目时,一般都要先划分好哪些是与用户交互的,哪些用来处理请求/数据等等,这些过 ...
- Openwrt15.05网关后pptp外拨失败的解决办法
路由器升级openwrt chaos_calmer 15.05版后发现NAT后面的客户端外拨pptp vpn服务器失败,经google后得知,在14.07版本中默认安装的又一个叫做 kmod-ipt- ...