使用div标签拖放功能纯粹使用javascript

Question

使用div标签拖放功能纯粹使用javascript

我需要使用纯Javascript(No Jquery或其他插件)创建嵌套拖放功能.

想法是将几个div标签作为组并且能够将该div标签/组拖动到另一个div标签/组的顶部以在其自身内创建子组(作为该组的子组)允许的最大子子级别为了说明我在说什么,请看看这个Jquery插件NestedSortabled示例,它确切地定义了我正在寻找的东西.

NestedSortable Jquery示例

另一个类似的例子:http://dbushell.com/2012/06/17/nestable-jquery-plugin/

我需要开发我的代码以完全像上面的例子,但只使用纯旧的学校javascript,请不要建议任何Jquery代码.

这是我目前正在工作的东西,但是现在我被困住了,无法弄清楚如何让子分组功能起作用.请帮忙!!

我的工作演示: http ://jsbin.com/IzAfutI/1

我的工作演示+代码: http ://jsbin.com/IzAfutI/3/edit？html,css,js,output

编辑:

让我举个更详细的代码示例.StartDrag和StopDrag包含该功能背后的主要逻辑.基本上当用户拖动div标签时,我当前正在一个已经存在的div标签的顶部或底部创建一个容器,用于拖动要放入的项目,但是当我使用相同的功能在另一个容器中创建该容器时(通过创建子组)我收到一个错误.这意味着也许我会以错误的方式解决问题,也许我的逻辑可能是错误的,或者代码还有其他问题.

组div标签的HTML标记:

<div class="dragContainerUsed">
    <div id="a7b94a42-fb00-4011-bd5a-4b48e6e578c5" class="dragPanel">
        <input type="hidden" value="1|fa7989d7-1708-4a90-9bf6-c91f6cef6952" />
        <div onmousedown="startDrag(event, this.parentNode)" class="dragPanelHeader">
            <div style="margin-left:4px; margin-top:3px; float:left;">1 - Group 1<span id="gta7b94a42-fb00-4011-bd5a-4b48e6e578c5"></span></div>
        </div>
    </div>
    <div class=\"dragSubContainerUnUsed\"></div>
</div>
<div class="dragContainerUnUsed"></div>

Run Code Online (Sandbox Code Playgroud)

所以我想要发生的是当用户拖动div顶部的另一个div dragSubContainerUnUsed它应该放在该subContainer ....

在开始拖动时,我创建了一个数组来存储所有容器和subContainers:

containers = new Array();

subContainers = new Array();

containers.push(dragTarget);
for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragcontainerunused") {
        containers.push(divs[i]);
    }
}

for (i = 0; i < divs.length; i++) {
    if (divs[i].className.toLowerCase() == "dragSubcontainerunused") {
        subContainers.push(divs[i]);
    }
}

Run Code Online (Sandbox Code Playgroud)

目前我在哪里卡住的部分是在功能onDrag和stopDrag,我不知道如何让子容器通过携手共创亚...

对于Instance,如果我将Group 3拖到Group 2之上,我希望group 3成为2的子组,如下所示: 在此输入图像描述