如何使用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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python os模块介绍
2014/11/30 Python
Python map和reduce函数用法示例
2015/02/26 Python
对python字典过滤条件的实例详解
2019/01/22 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
django用户登录验证的完整示例代码
2019/07/21 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
五年级上册复习计划
2015/01/19 职场文书
加入学生会自荐书
2015/03/05 职场文书
辩护词格式
2015/05/22 职场文书
建国大业电影观后感
2015/06/01 职场文书