0

私の質問はこの例に基づいていますが、いくつかの違いがあります.. http://jsfiddle.net/raad/SSxdB/15/

私は 3-4 のカテゴリを持つメニューを使用し、各カテゴリには 4 つの項目があります。そのため、要素を指定された div にドラッグ アンド ドロップし、指定された要素をメニュー リストから非表示にします (iこれを行った）しかし、それを元に戻すこともできます（同様に理解しました）。また、指定されたdivに別の要素をドラッグアンドドロップすると、すでに別の要素がドロップされており、最初の要素が復元され、新しいものが代わりになります..そして、ここに問題がありました..これがコードです..

    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");
        var draggedOrNewNodeId = "dragged-"+data;
        var theNode = document.getElementById(data);
        var draggedNode = document.getElementById(draggedOrNewNodeId);
        if (draggedNode != null) { ev.target.removeChild(draggedNode); }
        var nodeCopy = theNode.cloneNode(true);
        nodeCopy.id = draggedOrNewNodeId;
        nodeCopy.setAttribute("class", "dragged");
        nodeCopy.setAttribute("draggable", "false");
        document.getElementById(data).style.display = "none";
        remove_id = draggedOrNewNodeId +  "_remove";
        nodeCopy.innerHTML="<span class='undo' id='" + remove_id + "'>x</span>";
        ev.target.appendChild(nodeCopy);

        var remove = document.getElementsByClassName("undo").length;
            for (i=0; i<remove; i++) {
            var nodeToBeRemoved = /_remove$/;
            var nodeToBeReplaced = /dragged-/;
            deletedNode = remove_id.replace(nodeToBeRemoved, "");
            restoredNode = deletedNode.replace(nodeToBeReplaced, "");
                document.getElementsByClassName("undo")[i].onclick = function() {
                    elem = document.getElementById(deletedNode);deleted
                    elem.parentNode.removeChild(elem);
                    document.getElementById(restoredNode).style.display = "block";
                }
            }
    }

これは、2つまたはmover divがすでに配置されている場合、それらがすべて消えるという事実とは別に、私に問題を「引き起こす」部分です..他の問題は、それをallowDrop(ev)関数に挿入すると、それは実際に前の要素を削除し、ドロップすると新しい要素が配置されます..しかし、要素がdivの上にあるときにそれらを削除します..しかし、ドロップしたときにこれを実行したい..だから、このコードを移動すると関数を削除するには、以前に入力した要素を削除しますが、新しい要素を「消滅」させます..同様に...なぜこれが起こっているのかわかりません..また、temp_node = documentを置き換える提案が欲しいです. getElementsByClassName("ドラッグ")[0]; sth より具体的に (おそらく、指定された ev.target の子ノード?

        tempNodeCheck = hasClass(ev.target, "dragged"); 
        if (tempNodeCheck) {
                var nodeToBeReplacedcopy = /dragged-/;
                tempParentNode = ev.target.parentNode;
                temp_node = document.getElementsByClassName("dragged")[0];
                temp_node1 = document.getElementsByClassName("dragged")[0].id;
                restoredNode = temp_node1.replace(nodeToBeReplacedcopy, "");
                temp_node1.parentNode.removeChild(temp_node1);
                document.getElementById(restoredNode).style.display = "block";

htmlは次のようになります

<div id="drag1" draggable="true" ondragstart="drag(event)"></div>
<div id="drag2" draggable="true" ondragstart="drag(event)"></div>
<div id="drag3" draggable="true" ondragstart="drag(event)"></div>
<div id="drag4" draggable="true" ondragstart="drag(event)"></div>

<div class="droparea" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="droparea" id="drop5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

ここはhttp://jsfiddle.net/q5FAq/3/のjsfiddleのようなものです が、削除されたdivにsthが含まれている場合、divと一緒に「移動」されないことにも気付きました..（現在私は試してみましたが、各divで背景画像を使用していたので、目立ちませんでした..

4

1 に答える 1

0

そしてここに解決策があります..アクションがドロップエリアの既存のdivを置き換えることだったのに、なぜdivが消えていたのですか?

ev.target は、ドロップエリア内の既存の div をターゲットとして「見る」ため、たとえば..

要素がドロップ領域の最初の場所にドロップされたとき、ev.target はたとえば div でしたid=drop1(そこにドロップするように選択されている場合)

しかし、以前にドロップエリアにドロップされた要素の上に別の要素がドロップされた場合、ev.target はdragged-drag1コードからその div を削除することになっていたため、最近ドロップされた div も消えてしまいました。 ...

だから線の下に

 ev.target.appendChild(nodeCopy);

このブロックに置き換えられます

        tempNodeCheck = hasClass(ev.target, "dragged");
        if (tempNodeCheck) {
                var nodeToBeReplacedcopy = /dragged-/;
                tempParentNode = ev.target.parentNode;
                temp_node_class = tempParentNode.getElementsByClassName("dragged")[0];
                temp_node_id = temp_node_class.id;
                remove_node = document.getElementById(temp_node_id);
                restoredNode = temp_node_id.replace(nodeToBeReplacedcopy, "");  
                remove_node.parentNode.removeChild(remove_node);
                document.getElementById(restoredNode).style.display = "block";
                tempParentNode.appendChild(nodeCopy);
        }
        else {
        ev.target.appendChild(nodeCopy);
        }
于 2013-04-10T09:12:33.960 に答える