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

主要功能需求描述：1。左侧的元素结构将由Ajax调用服务器的数据生成，可以支持多级元素。父节点可以折叠。2.用户可以从左向右拖放元素。如果它是拖动的父节点元素，则有必要将其子节点的元素向右拖动。3.元素放在右边，右边可以接受元素的区域有两种可能。一个是建设新区，类似于“华东交通大学”所示。另一种是拖放到已经有元素的区域。他们之间的关系是“或”。单个元素区域具有“非”和“与”的关系。单击右侧的删除按钮删除节点元素。第一步：可以拖动左边的元素。给出的例子是将class='ui-widget-content '直接添加到要拖动的元素中。最初，我将类别“ui-widget-content”添加到所有要拖动的元素中。但是测试拖动结果后发现，元素只能在它所在的容器中拖动，然后向右拖动，水平或垂直滚动条就会出现在div中。不知道是不是参数设置错了。Overflow:auto为容器设置了auto。效果如下图： 所示。

因为最后左边的元素节点通过Ajax访问后台返回json数据，然后通过Javascript动态生成这个结构，不能为动态生成的元素绑定拖拽事件，所以不能调用draggable方法，所以我用了一个“中间拖放easy element”，总是在页面上。默认情况下，它不会显示，只要用户开始拖动左边的元素，它就会出现。当然，您需要在这里手动添加大量代码。复制的代码如下： div id=' draggable div ' class=' ui-widget-content '中拖容器元素/div脚本类型=' text/JavaScript ' $(' # draggable div ')。可拖动({containment:' parent '，drag3360 function (event，ui) {console.log('被拖动')；}，stop : function(){ console . log('拖放结束')；} });/script步骤2:将要拖动的元素的内容复制到draggableDiv。当父节点被拖动时，它下面的子节点元素也应该被向右拖动。如果它是一个被拖动的子节点元素，子节点元素将直接显示在右边。父节点和子节点是相对的，因为左侧树结构中的节点可以是无限的，所以一个元素既可以是子节点元素，也可以是父节点元素。通过监视鼠标的mousedown和mouseup事件，可以判断用户正在拖动元素。该步骤的原理如下图所示：

当用户拖动B节点时，首先将B元素上的内容复制到draggableDiv元素。当用户拖动B元素时，实际上是在拖动draggableDiv元素。因此，我们需要计算我们点击的b元素的位置，然后让dragablediv在拖动时显示正确的位置，那么拖动的就是dragablediv元素，用户看起来就像是被拖动的b节点元素。复制代码如下：var clickElement=null$(. three panels . pt relist ')。bind ('mousedown '，function(event){//获取当前mousedown元素var itemContent=$(this)的内容。html()；var dragablediv=$(' # dragablediv ')；$(draggableDiv)。css({ 'display': 'block '，' height ' : 0 })；//复制被点击的元素内容clickElement=$(此处)。clone()；var currentdiv=$(this)。offset()；$(draggableDiv)。css({ 'top': currentdiv.top，' left ' : current div . left })；draggableDiv.trigger(事件)；//取消默认行为返回false});$('#draggableDiv ')。mouseup(函数(事件){ $(this))。CSS({ ' height ' : ' 0 ' })；});//拖动元素时鼠标的位置为var dragDivLeft=0；var DragDivTop=0；$('#draggableDiv ')。可拖动({ containment: 'parent '，drag: function (event，ui) { $('#draggableDiv ')。css({ 'width': '260px '，' height ' : ' 22px ' })；$('#draggableDiv ')。追加(点击元素)；var壁橱=$('。close bar’)。偏移量()。顶部；dragDivLeft=event . target . offsetleft；dragDivTop=event . target . offsetTop；}，stop: function () {//拖动鼠标，将拖动容器的内容清空$('#draggableDiv ')。html(“”)；$('#draggableDiv ')。CSS({ ' height ' : ' 0 ' })；} });第三步：右边的元素可以放在指定的位置。您需要将元素拖到指定区域，然后释放操作。完成“释放”操作。从上图中可以看到，我正在将元素的左上角和左下角保存到一个数组中。然后在“拖动”的过程中，一直记录拖动的左侧，放在右侧的时候就可以判断当前元素将要放的位置。你可以下载代码来查看。完成代码后的渲染如下：。

代码下载：DragandDrop.rar。