如何使用jQuery Draggable和Droppable实现拖拽功能

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

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

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

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

第一步 左侧元素可以拖 官方给出的实例是直接在要拖动的元素上添加class="ui widget content" 最初我是在所有要拖动的元素都添加了“ui widget content”类别 但是测试拖动结果 发现元素只能在它所在的 container里面拖动 再往右拖动 div会出现水平或垂直滚动条 不知道是不是自己在参数设置上不对 container设置了 overflow:auto 效果如下图所示: 因 为最终的左侧元素节点是通过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事件 来判断用户在拖动元素 这步的原理如下图所示 当 用户拖动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":" "})} })lishixinzhi/Article/program/Java/JSP/201311/20005

是点击一个按钮，让左边div的内容全部到右边的div里吗？这不属于拖拽呀~

设左边的div的id='left'，右边的div的div的id='right'，按钮的id='btn'

$("#btn").click(function(){

   $("#right").html($("#left").html())

   $("#left").html("")

})

如果右边的div之前有值，就把左边的div内容添加到右边的div的内容后面：

$("#btn").click(function(){

   $("#right").append($("#left").html())

   $("#left").html("")

})

如果要直接实现这种效果的话，

一个程序比较复杂，

第二个可能效果不会很理想，会出现很有拖拽或者运动中的bug！

你可以参考一下jquery ui里面的拖拽。

利用jquery ui里面的，即方便，有能有效的去除各种意料意外的情况

给你一个地址，你可以看一下参考一下

http://jqueryui.com/demos/droppable/#revert

---