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>

小结
JQuery UI提供了强大的拖拽功能和良好的用户体验,同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考官方网站的Draggable 和 Droppable 。

时间: 2012-03-13

JQuery之拖拽插件实现代码

而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,这也算不上难点,毕竟两者都是基础的东西,关键在于熟练. 换到js 中,我们搞一个拖拽效果,大致有如下步骤: 1.让元素捕获事件(一般情况下,无非就是mouse

jquery sortable的拖动方法示例详解

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属

简单的jquery拖拽排序效果实现代码

步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

JQuery Dialog(JS 模态窗口,可拖拽的DIV)

效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

通过jquery-ui中的sortable来实现拖拽排序的简单实例

1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s

如何使用jQuery Draggable和Droppable实现拖拽功能

在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明:1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素.父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧.如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能.一种新建一个区域,就类似"华东交通大学"所示.另外一种就是拖放到已经有元素的区域.两者的关系是&quo

jquery中的sortable排序之后的保存状态的解决方法

当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js

jquery ui sortable拖拽后保存位置

jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable('toArray'); 记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序. 具体的代码如下可直接复制运行.本文将数组保存在localst

jQuery拖拽div实现思路

思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

模仿JQuery sortable效果 代码有错但值得看看

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

jQuery 动画效果代码分享

一.显示.隐藏 jQuery 中显示方法为:.show(),隐藏方法为:.hide().在无参数的时候,只是硬性的显示内容和隐藏内容. $('.show').click(function(){ //设置个触发事件 $('#box').show(); //显示 }); $('.hide').click(function(){ //设置个触发事件 $('#box').hide(); //隐藏 }); 在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000 毫秒等于 1 秒钟)

jQuery提示效果代码分享

代码一: 复制代码 代码如下: <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <

javascript模仿msgbox提示效果代码

复制代码 代码如下: //前任作者:http://www.moozi.net //修改:hh13774978@126.com,rayking function $(str){     return document.getElementById(str); } function _(str){     return document.getElementsByTagName(str); } function msg(boxtitle,boxtype,boxwidth,msg,url){     

jQuery仿360导航页图标拖动排序效果代码分享

jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

jQuery实现折叠、展开的菜单组效果代码

本文实例讲述了jQuery实现折叠.展开的菜单组效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧.提示:如果有错误,请刷新页面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/ 具体代码如下:

jquery实现经典的淡入淡出选项卡效果代码

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

jQuery实现的网页竖向菜单效果代码

本文实例讲述了jQuery实现的网页竖向菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,修改一下可用在后台管理中,显示在左侧的那种管理菜单.jquery加入后方便实现了菜单展开和合拢的功能,还加入了少许动画效果,兼容性好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/ 具体代码如下: <!DOCTYPE htm

jquery实现像栅栏一样左右滑出式二级菜单效果代码

本文实例讲述了jquery实现像栅栏一样左右滑出式二级菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了jquery实现像栅栏一样的左右滑出式二级菜单,会向左或向右滑出,支持中英文,使用时别忘了引入jquery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-show-nav-menu-codes/ 具体代码如下: <!DOCTYPE html> <head> <meta ht

jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码

本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015