5

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

想法是将多个 div 标签作为组，并能够将该 div 标签/组拖动到另一个 div 标签/组的顶部，以在其内部创建一个子组（作为该组的子组）允许的最大子组级别是 4。为了说明我在说什么，请查看这个 Jquery Plugin 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>

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

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

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我不知道如何让子容器通过创建子组来工作......

例如，如果我将第 3 组拖到第 2 组之上，我希望第 3 组成为 2 的子组，如下所示： 在此处输入图像描述

我应该能够将最多 4 个组添加到每个子组中，最多 4 个子组。像这样： 在此处输入图像描述

最后应该最多只有 4 个子分组级别，如下所示： 在此处输入图像描述

无论如何，请提供帮助，如果您能找出问题，请告诉我，或者如果我的代码需要更改逻辑，请告诉我，即使您可以完全重新编写/创建自己的新代码来实现这一点申请工作将不胜感激。几天来，我一直在努力解决这个问题，任何和所有的帮助都会被极大地接受......

4

4 回答 4

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">`
于 2013-10-16T10:08:06.610 回答
1

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

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

演示：http: //jsbin.com/aTUHULu/1

于 2013-11-05T19:47:17.157 回答
0

您必须将放置矩形划分为 4 个区域，如果将其放在第一个区域中，它将位于 1 级，如果将其放在下一个 40px 上，可以说它将被视为 2 级，因此

于 2013-09-18T20:41:26.263 回答
-1

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

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

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

    • 于 2013-09-14T19:26:39.153 回答