知识大全如何使用jQuery Draggable和Droppable实现拖拽功能

Posted 2022-07-20 元素

篇首语：花门楼前见秋草，岂能贫贱相看老。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全如何使用jQuery Draggable和Droppable实现拖拽功能相关的知识，希望对你有一定的参考价值。

如何使用jQuery Draggable和Droppable实现拖拽功能 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

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

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

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

　　第一步左侧元素可以拖 官方给出的实例是直接在要拖动的元素上添加最初我是在所有要拖动的元素都添加了“ui widget content”类别但是测试拖动结果发现元素只能在它所在的 container里面拖动再往右拖动 div会出现水平或垂直滚动条不知道是不是自己在参数设置上不对 container设置了 overflow:auto 效果如下图所示: 因为最终的左侧元素节点是通过Ajax访问后台返回json数据然后通过Javascript动态生成这种结构而已不能为动态生成的元素绑定drag事件也就不能调用draggable方法所以我使用了一个称之“中间拖拽容易元素” 这div一直在页面上只是默认不显示只要用户开始拖拽左侧的元素时它就出现了当然这里需要自己手动添加很多代码

复制代码代码如下: <div id= draggableDiv > 中间拖拽容器元素 </div> <script type=text/javascript> $("#draggableDiv") draggable( containment: "parent" drag: function (event ui) console log("拖拽中"); stop: function () console log("拖拽结束"); ); </script>

　　 第二步 将要拖的元素内容复制到draggableDiv上实现拖动父节点时其下面的子节点元素也要拖放到右边如果是拖动的子节点元素就在右边直接显示子节点元素父节点和子节点是相对的因为左侧树形结构的节点可以是无限级的所以一个元素既可能是子节点元素也会是父节点元素通过监听鼠标的 mousedown和mouseup事件来判断用户在拖动元素这步的原理如下图所示当用户拖动B节点时首先把B元素上的内容复制给draggableDiv元素当用户拖动B元素其实是拖动draggableDiv元素所以我们要计算出我们点击的B元素的位置然后让draggableDiv在拖动时候显示正确的位置然后拖动就是draggableDiv元素用户看起来是拖动的 B节点元素

复制代码代码如下: var clickElement = null; $(" threepanels ptreelist") bind("mousedown" function (event) //获取当前mousedown元素的内容 var itemContent = $(this) (); var draggableDiv = $("#draggableDiv"); $(draggableDiv) css( "display": "block" "height": ); //将点击的元素内容复制 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": " " ); ); //拖动元素时鼠标的位置 var dragDivLeft = ; var dragDivTop = ; $("#draggableDiv") draggable( containment: "parent" drag: function (event ui) $("#draggableDiv") css( "width": " px" "height": " px" ); $("#draggableDiv") append(clickElement); var closeTop = $(" closeBar") offset() top; dragDivLeft = event target offsetLeft; dragDivTop = event target offsetTop; stop: function () //拖拽结束将拖拽容器内容清空 $("#draggableDiv") (""); $("#draggableDiv") css("height":" "); ); cha138/Article/program/Java/JSP/201311/20005

知识大全 如何使用jQuery Draggable和Droppable实现拖拽功能

知识大全如何使用jQuery Draggable和Droppable实现拖拽功能