0

ここで始める前に、jsFiddle のリンクを示します: http://jsfiddle.net/SSxdB/5/

そしてコード：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset ="utf-8">
    <style type="text/css">
        #dragBox {width:336px; height:221px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
    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));

        if (data == "drag1")
        {
            foodOne();
        }
        if (data == "drag2")
        {
            foodTwo();
        }
    }

    function foodOne()
    {
        alert("You choose Food One");
    }

    function foodTwo()
    {
        alert("You choose Food Two");
    }
    </script>
</head>
<body bgcolor="#333333">
<div div align="center">
    <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221">
    <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="221">
    <br><br>
    <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>

2 つの画像 (リンクがローカルであるため、画像は jsFiddle に表示されませんが、アイデアはわかります) と、それらをドラッグできるボックスがあります。問題は、1 つの画像をボックスにドラッグするとその画像がなくなり、2 番目の画像をドラッグすると、ドロップ ボックスで折りたたまれて元の位置から移動することです。

ユーザーが画像をドラッグしたときにその画像が上から削除されず、2番目の画像が移動されたときに同じことを行い、ドロップボックスが常に同じ位置に留まるようにしようとしています画像が引き込まれます。

誰かがこれで私を助けることができれば、それは素晴らしいことです!

4

1 に答える 1

1

cloneNode を使用して画像ノードを複製し、それを画像ボックスに追加できます。そうすれば、元のイメージ ノードはそのまま残ります。

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")
    ev.target.appendChild(nodeCopy);

    if (data == "drag1") {
        foodOne();
    }
    if (data == "drag2") {
        foodTwo();
    }
}

http://jsfiddle.net/raad/SSxdB/15/を参照

Firefox 19.0 と Chrome 25.0.1364.97 m でテストしましたが、どちらも Windows 7 で、ボックスが折りたたまれる問題は見られません。

編集

更新されたコードは、ドラッグされたノードのクローンを作成し、それに新しい ID を割り当てます。これは、新しいノードがドラッグされたときにそれを削除するために使用できます。さらに、各ノードの 1 つのインスタンスのみをドラッグできるようにし、ドラッグされたノードでのドラッグを無効にします。 （これは簡単に削除できます）これ以上ドラッグしてコンテナが汚染されるのを防ぎます。

于 2013-03-01T15:29:00.633 に答える