Question

我正在开发一个网站，用户将一些项目拖放到框中。这些框表示为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＆＃39; s1，s4，s6的三个项目拖入id为d1的div中：

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

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

我在这里做错了什么？任何人都可以建议一个更好的方法来解决这个问题吗？

Answer 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

Answer 2

听起来像所选元素（）没有达到放置区。你能否确认鼠标位置与克隆必须与目标相交？或者，在单击的项目上设置活动类，然后在drop-zone success函数中获取它们。

将拖放的项目作为<div> </div>的子节点抓取

2 个答案: