JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理
首先要明确几个概念。
ource:拖拽源,要拖动的元素。
taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
1. drag start:在拖拽源(source)上按下鼠标并开始移动
2. drag move: 移动过程中
3. drag enter: 移动进入目标(target)容器
4. drag leave: 移出目标(target)容器
5. drop: 在目标(target)容器上释放鼠标
6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。
最简单的例子
最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下:
<html> <head></head> <body> <div id="container"> <div id="dragsource"> <p>拽我!</p> </div> </div><!-- End container --> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable(); }) </script> </body> </html>
拖动到另一个容器
更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数:
<html> <head></head> <body> <div id="container"> <div id="dragsource"> <p>拽我!</p> </div> </div><!-- End container --><div id="droppalbe" style="width: 300px;height:300px;background-color:gray"> <p>Drop here</p> </div><script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable(); $( "#droppable" ).droppable(); }) </script> </body> </html>
事件监听和回显(Feedback)
运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。
对于源(source),可以监听的事件包括:
create: 在source上应用draggable函数时触发
start:开始拖动时触发
drap:拖动过程中触发
stop:释放时触发
对于目标(target),可以监听的事件包括:
create: 在target上应用droppable函数时触发
activate:如果当前拖动的source可以drop到本target,则触发
deactivate:如果可以drop到本target的拖拽停止,则触发
over:source被拖动到target上面
out:source被拖动离开target
drop:source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子:
<html> <head></head> <body> <div id="dragsource"> <p id="targetMsg">:-|</p> </div><div id="droppable" style="background-color:gray;height:300"> <p>Can drop! </p> </div><script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable({ start: function(event,ui) { $(this).find("p").html(":-S"); }, stop:function(event,ui){ $(this).find("p").html(":-|"); } });$( "#droppable" ).droppable({ activate: function(event,ui) { $(this).find("p").html( "Drop here !" ); }, over: function(event,ui) { $( this ).find( "p" ).html( "Oh, Yeah!" );}, out: function(event,ui) { $( this ).find( "p" ).html( "Don't leave me!" );}, drop: function( event, ui ) { $( this ).find( "p" ).html( "I've got it!" ); } }); }) </script> </body> </html>
复制拖动
前面的例子都是移动元素,另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。
helper可以指定为“original”, "clone",其中"original"是默认值,即拖动自身,而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数,该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候,需要在target上指定drop事件函数,在该函数中将特定的元素添加到target容器上,否则drop的时候什么事情都不会发生。
简单复制的例子如下:
<html> <head></head> <body><div id="dragsource"> <p>拽我!</p> </div> <div id="container" style="background-color:gray;height:300"> </div><!-- End container --> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#dragsource" ).draggable({ helper:"clone" });$("#container").droppable({ drop:function(event,ui){ $(this).append($("<p style='position:absolute;left:"+ ui.offset.left+";top:"+ui.offset.top+"'>clone</p>")); } }); }) </script> </body> </html>
拖动控制
到目前位置,所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。
拖动方向
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下:
<html> <head></head> <body><div id="dragX"> <p>--</p> </div> <div id="dragY"> <p>|</p> </div><script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $("#dragX").draggable({axis:"x"}); $("#dragY").draggable({axis:"y"}); }); </script> </body> </html>
拖动范围
除了方向之外,还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window,Array是指定一个矩形区域(regin)的四元数组:[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制:
<html> <head></head> <body> <div id="container" style="background-color:gray;height:300"> <div id="draggable1" style="background-color:red;height:20;width:100"> <p>in parent</p> </div><div id="draggable2" style="background-color:green;height:20;width:100"> <p>in regin</p> </div><script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $("#draggable1" ).draggable({containment: "parent" }); $("#draggable2").draggable({containment: [20,20,300,200] }); }); </script> </body> </html>
拖动吸附
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素,使用grid参数指定吸附到网格,如下:
<html> <head> <style> .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } </style> </head> <body> <div id="container" style="background-color:gray;height:300"> <div id="draggable1" class="draggable"> <p>吸附到其他可拖拽元素</p> </div><div id="draggable2" class="draggable"> <p>吸附到容器</p> </div><div id="draggable3" class="draggable"> <p>吸附到网格(30x30)</p> </div> </div><!--container--><script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $("#draggable1").draggable({ snap: true }); $("#draggable2").draggable({ snap: "#container"}); $("#draggable3").draggable({grid: [30,30]}); }); </script> </body> </html>
拖动把手(handle)
默认是整个元素都可以拖动,也可以指定元素的某个子元素作为拖动的handle,如:
<div id="draggable"> <p>handle</p> </div> …… <script> $("#draggable").draggable({handle:"p"}); </script>
Drop限制
默认的droppable指定元素能够接受所有的drop, 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如:
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。
增强用户体验
前面是实现拖拽的功能,JQueryUI还有一些参数可以增强用户体验。比如,cursor参数可以指定鼠标指针的形状,cursorAt指定鼠标指针在source的相对位置,revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下:
<html> <head> <style> .draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .droppable { width: 300px; height: 300px; background-color:red}</style> </head> <body> <div id="draggable2" class="draggable"> <p>I revert when I'm not dropped</p> </div><div id="droppable" class="droppable"> <p>Drop me here</p> </div> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <script> $(function() { $( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } }); $( "#droppable" ).droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); </script> </body> </html>
本文来自:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html
JQuery UI的拖拽功能相关推荐
- jQuery UI 拖拽功能
原文地址:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html JQuery UI是JQuery官方支持的WebUI 代码库, ...
- jQuery实现table表格中行数据上下拖拽功能
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({cursor: "move",axis: "y&quo ...
- html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下 实现以下效果 完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...
- java 拖拽生成_JAVA UI 拖拽功能
java GUI拖拽功能是很实用也相对高级一些的功能. 有一小部分的GUI控件支持 他们有dragEnabled属性.这些JComponent包括: javax.swing.JColorChooser ...
- 中video拖动_【小功能】UE4中实现UI的拖拽
后续文章更新移步→微信公众号"虚幻社区"(mantra-xhsq),您的支持是我创作的动力. 在几乎任何游戏中,都会用到UI的拖拽,尤其是在背包操作中.所以几乎任何一个完整的游戏引 ...
- Element UI表格行拖拽功能
效果 <template><div class="hello"><!-- 拖拽功能必须绑定row-key唯一 --><el-tablere ...
- draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- css元素可拖动,使用css-transform实现更好的拖拽功能
拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用transform来实现这一功能. 一.拖拽的用户行为分析与原理解析 二.代码实现 三.总结 本文所涉及的 ...
- 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现.我也是在vuedraggable的基础上扩展实现的,如何想了解更多 ...
最新文章
- 广西计算机电缆线报价,广西壮族自治区耐火计算机电缆JYPVP32哪里便宜
- NLP 命名实体识别
- struts2中改变struts.xml默认路径
- Linux系统下解压缩安装MongoDB
- 对钱感兴趣?聊聊互联网工资收入的组成
- I2C 协议分析和学习
- python学习笔记(二)之列表
- Delphi多线程详解CreateThread、TThread,以及线程间通过临界区(CriticalSection)实现同步
- DevExpress XtraTreeList的复选框 禁用
- 走近算法:受众行为分析与人群定向
- Tomcat下载——tomcat7、tomcat8、tomcat9官网下载链接
- 计算机毕业设计Java蔚蓝在线学习平台(源码+系统+mysql数据库+Lw文档)
- 好用的软件网址(不一定是官网,不定时更新)
- elementui表格序号自动加上
- 给神经网络加入先验知识!
- PDF文件怎么合并?分享一个简单的方法
- x86架构鼻祖-i8086
- php识别图片的条码,如何用php实现生成条形码图片
- CIO如何推广ERP系统
- MySQL中 (GROUP BY 用法)和(ORDER BY用法)
热门文章
- Chinaz:谈谈近期的安全事件
- 插画构图如何学习,小白必看
- Python数据挖掘学习——鸢尾花分类、OneR算法
- Echarts显示自定义标注点/地图map引导线
- VB编程:UBound获取数组上限;LBound获取数组下限-25_彭世瑜_新浪博客
- Spring笔记(基于狂神视频+自己理解)
- Android面试题精选——再聊Android-Handler机制-2,android物联网开发李天祥源代码
- css 实现随风摆动
- java毕业设计汽车维修管理系统源码+lw文档+mybatis+系统+mysql数据库+调试
- 使用 Task.Wait()?立刻死锁(deadlock)