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


Posted in Javascript onJuly 05, 2013

在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示:

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

主要功能需求说明:
1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素。父节点可以折叠起来

2.用户可以通过拖放的操作,将元素从左侧拖放到右侧。如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边

3.元素放到右侧,右侧可以接受元素的区域有2种可能。一种新建一个区域,就类似“华东交通大学”所示。另外一种就是拖放到已经有元素的区域。两者的关系是“或”。单个元素区域有“非”和“且”的关系。点击右边删除按钮可以删除节点元素。

第一步:左侧元素可以拖
官方给出的实例是直接在要拖动的元素上添加class="ui-widget-content"。最初我是在所有要拖动的元素都添加了“ui-widget-content”类别。但是测试拖动结果,发现元素只能在它所在的container里面拖动,再往右拖动,div会出现水平或垂直滚动条。不知道是不是自己在参数设置上不对。container设置了overflow:auto。
效果如下图所示:如何使用jQuery Draggable和Droppable实现拖拽功能

因为最终的左侧元素节点是通过Ajax访问后台返回json数据,然后通过Javascript动态生成这种结构,而已不能为动态生成的元素绑定drag事件,也就不能调用draggable方法,所以我使用了一个称之“中间拖拽容易元素”,这div一直在页面上。只是默认不显示,只要用户开始拖拽左侧的元素时,它就出现了。当然这里需要自己手动添加很多代码。

<div id='draggableDiv' class="ui-widget-content">
        中间拖拽容器元素
    </div>
    <script type="text/javascript">
        $("#draggableDiv").draggable({
            containment: "parent",
            drag: function (event, ui) { console.log("拖拽中"); },
            stop: function () { console.log("拖拽结束"); }
        });
    </script>

第二步:将要拖的元素内容复制到draggableDiv上。实现拖动父节点时,其下面的子节点元素也要拖放到右边。如果是拖动的子节点元素,就在右边直接显示子节点元素。父节点和子节点是相对的,因为左侧树形结构的节点可以是无限级的,所以一个元素既可能是子节点元素,也会是父节点元素。通过监听鼠标的mousedown和mouseup事件,来判断用户在拖动元素。这步的原理如下图所示:

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

当用户拖动B节点时,首先把B元素上的内容复制给draggableDiv元素,当用户拖动B元素,其实是拖动draggableDiv元素。所以我们要计算出我们点击的B元素的位置,然后让draggableDiv在拖动时候显示正确的位置,然后拖动就是draggableDiv元素,用户看起来是拖动的B节点元素。

var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) { 
//获取当前mousedown元素的内容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 }); 
//将点击的元素内容复制 
clickElement = $(this).clone(); 
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event); 
//取消默认行为 return false; }); 
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); }); 
//拖动元素时鼠标的位置 
var dragDivLeft = 0; 
var dragDivTop = 0; 
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" }); 
    $("#draggableDiv").append(clickElement); 
    var closeTop = $(".closeBar").offset().top; 
    dragDivLeft = event.target.offsetLeft; 
    dragDivTop = event.target.offsetTop; }, 
    stop: function () { 
        //拖拽结束,将拖拽容器内容清空 
        $("#draggableDiv").html(""); 
        $("#draggableDiv").css({"height":"0"}); } 
});

第三步:右边的元素可以放到指定的位置上
需要将元素拖到指定的区域里面,然后释放操作。完成“放”的操作。可以从上图看出,我是将元素的上边左边和下边缘的左边存到一个数组里面。然后在“拖”的过程中,一直记录了拖动的左边,放到右侧时,就可以判断当前元素将要放的位置。具体可以下载代码查看。
完成代码之后的效果图如下:
如何使用jQuery Draggable和Droppable实现拖拽功能

代码下载:DragandDrop.rar

Javascript 相关文章推荐
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 #Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 #Javascript
js文件缓存之版本管理详解
Jul 05 #Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 #Javascript
把input初始值不写value的具体实现方法
Jul 04 #Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 #Javascript
简单实用jquery版三级联动select示例
Jul 04 #Javascript
You might like
PHP迭代器的内部执行过程详解
2013/11/12 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php链式操作的实现方式分析
2019/08/12 PHP
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python使用rpc框架gRPC的方法
2018/08/24 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python实现ip地址的包含关系判断
2020/02/07 Python
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
企划经理的岗位职责
2013/11/17 职场文书
优秀演讲稿范文
2013/12/29 职场文书
十八大闭幕感言
2014/01/22 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
应届生求职信
2014/05/31 职场文书
营销团队口号
2014/06/06 职场文书
大学生就业求职信
2014/06/12 职场文书
绘画专业自荐信
2014/07/04 职场文书
面试通知邮件
2015/04/20 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
在项目中使用redis做缓存的一些思路
2021/09/14 Redis