0

この投稿を見てくれてありがとう

私の問題を示すためにjsFiddleページをアップしました

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
        #div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;}
        #div3 {width:200px;height:200px;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));
        }
    </script>
</head>
<body>
    <center>
        <p>Drag the image you want into this box!</p>
        <table>
            <tr>
                <td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                <td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                <td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
            </tr>
        </table>
    <img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
    <img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
    <img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
</body>
</html>

基本的には、画像を上の div (そこに 3 div) にドラッグすると、画像を元の場所から消えないようにしたいのです。

画像がドラッグされた div も画像をキャプチャする必要があります。新しいオブジェクトが同じ div (以前に別の画像をドロップした) にドラッグされた場合、新しい画像は古い画像を上書きする必要があります。

もう 1 つの質問は、div1、div2、div3 の値を取得して、フォーム ポストの送信ボタンがある場合、ブラウザはユーザー入力をキャプチャできるでしょうか。たとえば、drag1、drag2、またはdrag3。

誰でも問題の解決を手伝ってくれます。助けてくれてありがとう!!

このjsFiddleを使用して更新:

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}

以下の回答を使用すると、元の画像が保持されます。しかし、問題は、既に画像を取得しているボックスに別の画像をドラッグすると、上書きされないことです。

4

2 に答える 2

1

ドロップ機能にいくつかの変更を加えました。

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var new_img = $('#'+data).clone();
$('#'+ev.target.id).html(new_img);
}

これを試して

于 2013-10-11T09:54:26.850 に答える