如何使用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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JavaScript入门学习书籍推荐
Jun 12 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jquery图片放大镜效果
Jun 23 jQuery
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
JS实现滑动导航效果
Jan 14 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php curl基本操作详解
2013/07/23 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
angular学习之动态创建表单的方法
2018/12/07 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
Python lxml模块安装教程
2015/06/02 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
python实现控制台打印的方法
2019/01/12 Python
Python连接Impala实现步骤解析
2020/08/04 Python
python中常用的数据结构介绍
2021/01/12 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
电子信息科学专业自荐信
2014/01/30 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
科级干部考察材料
2014/02/15 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
电影建国大业观后感
2015/06/01 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
MySQL中order by的执行过程
2022/06/05 MySQL