在前一篇文章中，我介绍了Web开发中的基本拖放原理，现在给出了需要完成的功能：




主要功能要求：
1。最终将通过ajax调用服务器的数据生成左元素结构，支持多层次元素，父节点可以折叠起来。

2。用户可以通过拖放操作从左边和右边拖拽元素。如果它是拖动父元素的父元素，则需要将其子节点的元素拖动到右边。

3。元是在右侧，并有2的可能性在该地区可以接受的元素，一个新的领域，类似于华东交通大学。二是拖放，有一个单元的面积。两者之间的关系是一个元区或非-和-有关系。点击删除按钮删除节点元素。

第一步：可以拖动左侧元素。
官方的例子是添加class=UI控件内容直接到元被拖。最初，我所有的元素都被拖添加用户界面控件的内容范畴，但试验结果发现元素只能拖拖，它是在容器中，然后正确的div将拖动水平或垂直滚动条出现。我不知道如果我错了，在参数设置。容器设置了溢流：汽车。
效果如下图所示：

因为左边是通过Ajax JSON数据返回最后一个元素节点访问的背景，然后通过结构Javaｓｃｒｉｐｔ动态生成，不仅动态生成的元素结合拖动事件，也不能称之为可拖动的方法，所以我用电话把这个div元素，已经在网页上。只有默认不显示，只要用户开始拖动，拖动左侧元素，它出现了。当然，你需要在这里添加了很多自己的代码。
复制代码代码如下所示：

中间拖放容器元素


$（# draggablediv）。Draggable（{
遏制：家长
阻力：功能（事件，UI）{ console.log（拖放）；}，
停止：函数（）{ console.log（拖放结束）；}
}）；


第二步：复制你想拖到draggablediv元素。当父节点拖，下面的子元素拖到右边。如果它是一个拖子元素的子节点的元素是直接显示在右侧。父节点和子节点都是相对的，因为左树结构的节点可以是无限的，所以一个元素可以是一个孩子结点或父节点元素。通过听MouseDown和MouseUp事件鼠标确定用户的拖动元素。这个步骤的原理如下图所示。




当用户拖动节点B，B元素的含量先复制到draggablediv元，当用户拖动的元素，它实际上是把draggablediv元。所以我们要计算的B元素我们点击的位置，然后让draggablediv显示正确的位置时，拖动，然后阻力是draggablediv元，和用户似乎是B节点单元拖。
复制代码代码如下所示：
无功clickelement = null；$（。threepanels。ptreelist）。Bind（mouseDown
/ /获取鼠标当前元素的内容
VaR的项目填写内容=美元（这）。Html（）；var draggablediv = $（# draggablediv ）；
（draggablediv美元）。Css（{显示：块
单击复制元素
clickelement = $（this）Clone（）；
无功currentdiv =美元（这）。偏移（）；$（draggablediv）。Css（{顶：currentdiv.top，左：currentdiv。左}）；draggablediv.trigger（事件）；
取消返回的默认行为）；
$（# draggablediv）。Mouseup（函数（事件）{ $（this）。Css（{高度：0}）；}）；
拖动鼠标位置元素
无功dragdivleft = 0；
无功dragdivtop = 0；
$（# draggablediv）。Draggable（{遏制：父母
$（# draggablediv）。追加（clickelement）；
无功closetop = $（。closebar）。偏移（顶部）；
dragdivleft = event.target.offsetleft；
dragdivtop =事件。目标。offsettop；}，
停止：函数（）{
拖动空容器的结尾
$（# draggablediv）。Html（）；
$（# draggablediv）。Css（{高度：0}）；}
}）；

第三步：右边的元素可以放在指定的位置。
元素需要被拖到指定的区域，然后操作释放。完成操作。你可以在上面看到的，我保存的元素的左下边缘到阵列中。在拖动的过程中，阻力保持在左边，把右边的时候，你可以确定当前元素是要放。具体来说，你可以下载代码视图。
代码完成后，结果如下：


代码下载：draganddrop.rar