如何使用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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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图片加中文水印实现代码分享
2012/10/31 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
popdiv
2006/07/14 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python提取网页中超链接的方法
2016/09/18 Python
Python常见工厂函数用法示例
2018/03/21 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
实习销售业务员自我鉴定
2013/09/21 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
会务接待方案
2014/02/27 职场文书
授权委托书范本
2014/04/03 职场文书
授权委托书格式范文
2014/08/02 职场文书
怎样写离婚协议书
2015/01/26 职场文书
感恩教师节主题班会
2015/08/12 职场文书
导游词之长城八达岭
2019/09/24 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle