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

我需要使用纯Javascript创建嵌套的拖放功能（请不要使用Jquery或其他插件）

其想法是将多个div标记作为组，并能够将该div标记/组拖动到另一个div标记/组的顶部，以在其自身（作为该组的子级）中创建一个子组。允许的子组的最大级别为4。为了说明我在说什么，请看这个Jquery插件嵌套排序示例，它准确地定义了我要查找的内容

另一个类似的例子：

我需要开发与上述示例完全相同的代码，但仅使用纯老式javascript，请不要建议使用任何Jquery代码

这是我目前正在做的工作，但是我现在被卡住了，不知道如何让子分组功能发挥作用。请帮忙

我的工作演示：

我的工作演示+代码：

编辑：

让我更详细地举例说明代码。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>

1-第1组

所以我想要发生的是，当用户拖动另一个div到div dragsubcontainer的顶部时，它应该被放置在该子容器中

开始拖动时，我创建一个数组来存储所有容器和子容器：

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]);
    }
}

containers=newarray（）；
子容器=新数组（）；
容器.推送（牵引目标）；
对于（i=0；i

目前我遇到的问题是函数

onDrag

和

stopDrag

，我不知道如何让分包商通过来创建子组

例如，如果我将组3拖动到组2的顶部，我希望组3是2的子组，如下所示：

我应该能够在每个子组中添加最多4个组，最多4个子组。 这样地：

最后，最多只能有4个级别的子组 这样地：

---

请尽你所能提供帮助，如果你能发现问题，请告诉我，或者如果我的代码需要更改逻辑，请告诉我，即使你可以完全重新编写/创建你自己的新代码以使此应用程序正常工作，也将不胜感激。几天来，我一直在努力解决这个问题，任何和所有的帮助都将得到极大的接受…

如果您愿意，我也会发布代码，但我认为如果您尝试并实现它，这种方法本身会起作用。这就是方法

---

将该项添加为listitem

而不是div。这将自动创建控件，并且在最后对其进行解析将非常容易。这里需要做的是onDrop，从div中获取文本（和其他属性），创建一个li并将div添加到该li中。这将使您的代码能够重新编写并进一步删除div。注意-请记住在拖动结束时删除li（或根据div的父级删除ul）。

您必须将放置矩形划分为4个区域，如果您将其放置在第一个区域，则它将位于级别1，如果您将其放置在下一个40px，则它将被视为级别2，因此请检查此代码

function allowDrop(ev){

ev.preventDefault();

}

function drag(ev)
{

ev.dataTransfer.setData("Text",ev.target.id);


}

function drop(ev) 
{

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));


}


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>"

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">`

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
"
`

我一直在做这件事，几个月前就完成了。但是我忘了这篇文章。所以我决定为其他可能正在寻找答案的人发布完整的解决方案

整个代码太长，无法在此处发布，但下面是代码的链接：

---

演示：

所以问题需要在问题中包含代码，而不是在外部站点上。到底是什么问题？这听起来像是

dragNode.parentNode.removeChild（dragNode）；dropNode.appendChild（dragNode）的一个简单例子

。我的问题是，我正在试图找出在我的代码中创建子分组所需的逻辑/代码。目前，您可以拖放每个单独的组，但我希望能够将一个组拖到彼此之间/拖到彼此之间，同时在其内部创建最多级别为4个子组的子组。我认为如果你自己发现了问题，并问了一些更具体的问题（也许更短？）好吧，就是这样，我在上面使用子容器发布的代码是我创建子分组时最想做的，但是当我实现它时，它打破了现有的拖放工作方式，这意味着我可能没有正确的方法。我会诚实地问，不带jquery的情况下如何做，是不是？”我如何在纯html中创建可操作的3d图像？我不知道css/js/jquery或java/flash。我以前也尝试过类似的方法，但可能我对整个DOM操作的了解有点有限，因为我是初学者。您是否可以在我的代码中进行更改（）或者为您的解决方案发布一个工作代码。非常感谢您的帮助亲爱的先生！！您有机会