Question

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

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

NestedSortable Jquery Example

另一个类似的例子：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>

所以我想要发生的是当用户在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]); } }

目前我遇到的部分是函数onDrag和stopDrag，我不知道如何让subContainers通过创建子组...

对于Instance，如果我将Group 3拖到Group 2之上，我希望group 3成为2的子组，如下所示：

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

最后应该只有最多4个级别的子组像这样：

请尽可能帮助，如果你能找到问题，请告诉我或者我的代码是否需要改变逻辑，告诉我，即使你可以完全重写/创建你自己的新代码使这个应用程序工作将非常感激。我一直试图解决这个问题，所有的帮助都将被大大接受......

Answer 1

检查此代码

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">`

Answer 2

正在研究这个问题，几个月前完成了。但忘了这篇文章。所以我决定为其他可能正在寻找答案的人发布完整的解决方案。

整个代码太长了，无法在此处发布，但这里是代码的链接： Drag/Drop Functionality with Div Tags

DEMO： http://jsbin.com/aTUHULu/1

Answer 3

你必须将掉落矩形划分为4个区域，如果你将它放在第一个区域，它将在1级，如果你把它放在下一个40px上，我们就会认为它将被认为是2级，因此

Answer 4

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

而不是div，将项目添加为列表项

。这将自动打算控制，你最终将很容易解析它。你需要做的是onDrop，从div中获取文本（和其他属性），创建一个li并在li中添加div。这将使您的代码能够重新划分并进一步删除div。注意 - 记住在拖动结束时删除li（或根据div的父级的ul）。

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

4 个答案: