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之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。
最简单的例子
最简单的拖拽是不改变元素所在的容器，而只改变其位置。例子如下：
<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函数：
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div><!-- End container -->
<div id="droppalbe" style="width: 300px;height:300px;
<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。看一下实际的例子：
<head>
</head>
<body>
<div id="dragsource">
<p id="targetMsg">:-|</p>
</div>
<div id="droppable" style="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的时候什么事情都不会发生。
简单复制的例子如下：
<head></head>
<body>
<div id="dragsource">
<p>拽我!</p>
</div>
<div id="container" style="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参数可以限制只能水平或竖直拖动。如下：
<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作为范围限制：
<head></head>
<body>
<div id="container" style="height:300">
<div id="draggable1" style="height:20;width:100">
<p>in parent</p>
</div>
<div id="draggable2" style="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参数指定吸附到网格，如下：
<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="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，如：
<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“飘”回原来的位置。一个组合的例子如下：
<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>
小结
JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考官方网站的Draggable 和 Droppable 。
JQuery UI的拖拽功能实现方法小结的更多相关文章
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法
我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- duilib中控件拖拽功能的实现方法（附源码）
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件增加拖拽的功能,而实际 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- Jquery.Sorttable 桌面拖拽自定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- RCP：拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- 使用UGUI实现拖拽功能（拼图小游戏）
实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragH ...
随机推荐
- ubuntu安装cuda、cudnn
环境: Ubuntu 16.04.4 LTS CUDA:8.0 CUDNN:5.1 CUDA下载:https://developer.nvidia.com/cuda-80-ga2-download-a ...
- 洛谷P4526 【模板】自适应辛普森法2(simpson积分)
题目描述 计算积分 保留至小数点后5位.若积分发散,请输出"orz". 输入输出格式 输入格式: 一行,包含一个实数,为a的值 输出格式: 一行,积分值或orz 输入输出样例 输入 ...
- spring作用
在SSH框假中spring充当了管理容器的角色.我们都知道hibernate用来做持久层,因为它将JDBC做了一个良好的封装,程序员在与数据库进行交互时可以不用书写大量的SQL语句.Struts是用来 ...
- ASCII、Unicode、UTF-8编码关系
由于计算机是美国人发明的,因此,最早只有127个字符被编码到计算机里,也就是大小写英文字母.数字和一些符号,这个编码表被称为ASCII编码,比如大写字母A的编码是65,小写字母z的编码是122.但是要 ...
- Question | 你所遇到的验证码问题可能都在这里了
本文来自网易云社区 "Question"为网易云易盾的问答栏目,将会解答和呈现安全领域大家常见的问题和困惑.如果你有什么疑惑,也欢迎通过邮件(zhangyong02@corp.ne ...
- Angular6项目搭建
参照 草根专栏- ASP.NET Core + Ng6 实战:https://v.qq.com/x/page/b076702elvw.html 安装工具: Nodejs, npm 最新版, h ...
- (原) MaterialEditor部- UmateriaEditor中 Node编译过程和使用（3）修正
@author: 白袍小道 转载说明原处,爱护劳动 插件同步在GITHUB: DaoZhang_XDZ 说明 1.本篇是接着-----(原) MaterialEditor部- Umat ...
- 词嵌入向量WordEmbedding
词嵌入向量WordEmbedding的原理和生成方法 WordEmbedding 词嵌入向量(WordEmbedding)是NLP里面一个重要的概念,我们可以利用WordEmbedding将一个单 ...
- aishell数据处理为thchs30格式
目录 aishell数据转换格式 aishell数据转化方法 aishell数据格式对于用神经网络处理数据的同学来说比较不友善,因为他只有文字转录和音素级别的转录,并没有拼音的转录. 而thchs30 ...
- 对int类型最小值INT_MIN取负值结果不变
在32位系统中,int类型的最大值是0x7fffffff(即除了最高的1Bit其他31位都为1),而最小值是0x80000000(除了最高1bit,其他31位都为0). 显然,对于最小值求负数是不存在 ...