0

ユーザーが基本的に画像をドロップボックスにドラッグできるドラッグアンドドロップボックスのJavaScriptコードに取り組んでおり、特定の組み合わせでドラッグすると、ある種のメッセージが返されます。たとえば、image1、image3、および image5 をドラッグすると、メッセージが返されます。これにはDOMツリーを使用していますが、複数の画像がドラッグされたときを確認する方法がわかりません。以下に示すように、1つの画像で動作させることができます。いつものように助けていただければ幸いです。

<html>
<head>
    <meta charset ="utf-8">
    <style type="text/css">
        #dragBox {width:400px; height:320px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

        .thumbnails img 
        {
            height: 80px;
            border: 4px solid #555;
            padding: 1px;
            margin: 0 10px 10px 0;
        }

        .thumbnails img:hover 
        {
            border: 4px solid #00ccff;
            cursor:pointer;
        }

    </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");
        var theNode = document.getElementById(data);
        var nodeCopy = theNode.cloneNode(true);

        ev.target.appendChild(nodeCopy);

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

        //ev.target.removeChild(nodeCopy);

    }

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

    </script>
</head>
<body bgcolor="#333333">
<div class="gallery" align="center">
    <div class="thumbnails">
        <img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)"">
        <img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)" >
        <img id="drag3" src="foodThree.jpg" draggable="true" ondragstart="drag(event)">
        <img id="drag4" src="foodFour.jpg" draggable="true" ondragstart="drag(event)">
        </br></br>
        <div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div></br>

</div>
</body>

4

1 に答える 1

0

複数のドロップのようなものが存在するかどうかさえわかりません。しかし、私はドラッグ アンド ドロップの操作をあまり行っていません。それとも、未処理のドロップ操作が残っているような状態ですか?

したがって、これに関する私の限られた知識では、論理的な解決策は、ドロップごとにIDをプッシュする結果配列のようなものを用意し、探している組み合わせが配列に含まれているかどうかを確認する新しい関数を持つことです。

于 2013-04-01T13:37:08.143 に答える