1

私を助けてください、私は一般的にドラッグ可能およびドロップ可能なクラスを使用する方法を知っていますが、これを達成する方法を見つけることができません:

div にドラッグ アンド ドロップする必要がある大きなサイズの画像があります。

1）ドラッグ中に、大きなサイズの画像を移動する代わりに、小さなサイズの画像を使用したい（すでに持っているので、srcを変更するだけです）。

2）ターゲットのdivに到達したら、ドラッグした画像を非表示にして、元の場所に大きなサイズの画像を再度表示したいと思います。

唯一の制限は、「元に戻す: 無効」を適用する必要があることです。

これは私のコードです:

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui){
        //Change big image with a small version of it
        $(this).attr("src").replace("/Large/","/Small/"); //<--this do nothing
    }
});
$("#target").droppable({
    drop: function(e, ui) {
        alert("was added"); //<-- no problem here.
        //Restore the big_img
    }
});

ありがとうございました。

4

2 に答える 2

1

私はそれを解決したと思います：

「ヘルパー」を使用すると、代わりに次のような他の画像を使用することができます。

$("#big_img").draggable({ 
    helper: return $("<img src='"+$(this).attr("src").replace("/Large/","/Small/")+"' />");
});

マウスカーソルの中央に配置するだけですが、問題ないと思います。そうすれば、ドロップされた要素を削除することも問題になりません。ですから、実際には動いていないので、画像を復元する必要はありません。:)

別の選択肢があれば、喜んでお読みします。

于 2010-02-04T06:22:22.373 に答える
0

String.prototype.replace()ソース文字列を変更しませんが、変更された新しい文字列を返します。次のことを試してください。

$("#big_img").draggable({ 
    revert: 'invalid', 
    drag : function(e, ui) {
        $this = $(this);
        $this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
    }
});
于 2010-02-04T09:23:09.800 に答える