1

表のセルにドラッグしたい画像があります。以下を変更して、ある画像を別の画像の上にドラッグできるようにするにはどうすればよいですか。

function drag(ob) {
ob.dataTransfer.setData("Text",ob.target.id); }

function drop(ob) {
var id = ob.dataTransfer.getData("Text");
if (!$(ob.currentTarget).find("img")[0])
    ob.target.appendChild(document.getElementById(id));
ob.preventDefault();    
}

function allowDrop(ob) {
  ob.preventDefault();
}

jsfiddleで完全なコード

さらに、ドロップ機能にすべての画像 (行 1 から行 3 まで) のファイル名を表示するコードを含めることは可能ですか? ありがとう。

4

1 に答える 1

0

あなたが何を達成しようとしているのか完全にはわかりません。ただし、これにより、画像が相互にドラッグされ、置き換えられた画像が削除されます。画像名を追跡する方法を示す小さなdivもあります。

名前を追跡するためにdivを追加しました。これを簡単に隠しフィールドにすることができます。

<div id="images"></div>

次に、ドロップを次のように変更しました。

function drop(ob)
{
    var id = ob.dataTransfer.getData("Text");
    var t = ob.target;

    if (ob.target.nodeName == "IMG")
        t = ob.target.parentNode;

    t.innerHTML = "";
    var img = document.getElementById(id);
    t.appendChild(img);

    $('#images').append(img.src + "; " )

    ob.preventDefault();    
}

http://jsfiddle.net/qgp7N/3/

于 2012-10-22T02:10:18.467 に答える