如何使用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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
分享10段PHP常用代码
2015/11/11 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python实现发送邮件及附件功能
2021/03/02 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Lucene推荐的分页方式是什么?
2015/12/07 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
社区学习十八大感想
2014/01/22 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
公司感谢信范文
2015/01/22 职场文书
python3操作redis实现List列表实例
2021/08/04 Python