抓取拖放项目作为 <div> 的子节点答案

【问题标题】：Grabbing dragged and dropped items as child nodes of <div>抓取拖放项目作为 <div> 的子节点
【发布时间】：2014-09-03 12:48:19
【问题描述】：

我正在开发一个网站，用户可以将一些项目拖放到盒子中。这些框表示为 div 元素。最后，我运行这个 javascript 函数来为每个 div 元素返回一个字符串，以查看哪些项目（子项）被拖入。

function get_children_string(div_id) {
    var elem = document.getElementById(div_id);
    var child_str = div_id;
    var i = 0;
    for(i=0;i<elem.childNodes.length;i++)
        child_str = child_str + elem.childNodes[i].id;
    return child_str;
}

例如，如果将三个id分别为s1、s4、s6的item拖到一个id为d1的div中：

get_children_string('d1') // returns 'd1s1s4s6'

问题是每当我拖动超过 5 个项目时，有些孩子会迷路。例如，我拖放 7 个项目，我得到一个包含 4 个子节点的结果。或者我拖动 6 个项目，得到 3 个子节点。我确保所有子 id 都很好（我的意思不是空字符串），实际上每次我得到 elem.childNodes.length 3 或 4。

我在这里做错了什么？任何人都可以提出更好的方法来处理这个问题吗？

【问题讨论】：

同时发布 html 代码，以及创建 div 的方式和位置
@AbdulJabbar 我正在使用一些 php 函数/类来构建我的 html 代码。并且很难从中创建 html 代码。对此感到抱歉。
hmm 你的问题的一个原因可能是当你的这部分代码运行时所有的 div 还没有创建？他们都被创建了，你可以访问他们的 id 吗？
是的，此代码在单击标有“保存”的按钮后运行。到那时，所有内容都已创建并在屏幕上可见。

标签： javascript html drag-and-drop

【解决方案1】：

很难从您在此处编写的部分代码中指出问题所在。您需要检查所有子 div 是否实际上都被添加到父 div 中。如果它们在那里，那么下面的简单代码应该适合你：

HTML：

<div id="d1">
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
    <div id="s5"></div>
    <div id="s6"></div>
    <div id="s7"></div>
</div>

脚本：

function get_children_string(div_id) {
    var elem = document.getElementById(div_id);
    var child_str = div_id;
    var i = 0;

    var childNodes = elem.childNodes;
    for(i=0;i<elem.childNodes.length;i++) {
        if(elem.childNodes[i].nodeType !=3) //because it includes some whitespace and other garbage nodes
            child_str = child_str + elem.childNodes[i].id;
    }
    return child_str;
}

alert(get_children_string('d1')); //gives d1s1s2s3s4s5s6s7

See the DEMO here

【讨论】：

感谢您的示例。我也在不涉及拖放的情况下进行这项工作。看起来拖放以某种方式无法按预期工作。会检查更多。
祝你好运，记住 console.log() 或 alert() 是你最好的朋友
我发现了问题所在。丢弃的物品正在成为先前丢弃物品的子项。所以当我检查孙子时，事情是固定的。

【解决方案2】：

听起来像是选定元素 () 没有到达放置区。您能否确认鼠标位置与克隆必须与目标相交？或者，在单击的项目上设置一个活动类，然后在放置区成功功能中获取它们。

【讨论】：