37

jQuery ライブラリを使用してドラッグ アンド ドロップを実装しています。

ドロップされたときにドラッグされている要素を取得するにはどうすればよいですか?

div内の画像のIDを取得したい。次の要素がドラッグされます。

<div class="block">
    <asp:Image ID="Image9" AlternateText="10/12/2008 - Retina" Width=81 Height=84 ImageUrl="~/uploads/ImageModifier/retina.jpg" runat=server />
</div>

私は彼らの例から標準の削除された関数を持っています:

$(".drop").droppable({
                 accept: ".block",
                 activeClass: 'droppable-active',
                 hoverClass: 'droppable-hover',
                 drop: function(ev, ui) { }
});

いろいろ試してみui.idましたがうまくいかないようです。

4

8 に答える 8

40

ui.draggable ではありませんか?

ここに移動して（Firefoxで、firebugがあると仮定して）firebugコンソールを見ると、ドラッグされているdivであるui.draggableオブジェクトのconsole.dirを実行していることがわかります

http://jsbin.com/ixizi

したがって、ドロップ関数で必要なコードは

       drop: function(ev, ui) {
                 //to get the id
                 //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
                 console.dir(ui.draggable)  
       }
于 2008-10-13T12:57:00.253 に答える
14 
$(ui.draggable).attr("id")

...

于 2009-03-18T23:11:42.623 に答える
12

ui.draggable() はもう機能していないようです。使用できるIDを取得するには

$(event.target).attr("id");
于 2011-04-12T11:17:24.243 に答える
7

2017年に有効な答え

多くの時間が経過しましたが、現在受け入れられている回答が機能しなくなっていることがわかりました。

現在機能するソリューション：

$('#someDraggableGroup').draggable({
                helper: 'clone',
                start: function( event, ui ) {
                    console.log(ui.helper.context)
                    console.log(ui.helper.clone())
                }
            })

ここでui.helper.contextは、ドラッグしようとしている元のオブジェクトをclone()指し、複製されたバージョンを指します。

編集

上記は、draggable()関数を使用してドラッグしているオブジェクトも表示されます。draggableでドロップされたオブジェクトを検出するdroppable()には、次のようにします。

$('#myDroppable').droppable({
    drop: function(event, ui){
        console.log(ui.draggable.context)
                 OR
        console.log(ui.draggable.clone() )
    }
})
于 2015-03-04T19:24:53.440 に答える
6

上記のほとんどを試しましたが、最終的には

event.target.id

私のために働いた。

于 2012-02-08T15:24:24.437 に答える
3

redquare は正しいです。関数内で次を参照してくださいui.draggable。

$(".drop").droppable({ accept: ".block", 
                       activeClass: 'droppable-active', 
                       hoverClass: 'droppable-hover', 
                       drop: function(ev, ui) { 
                           //do something with ui.draggable here
                       }
});

そのプロパティは、ドラッグされているものを指します。

複製された「ヘルパー」を使用している場合、ドラッグ可能なものはオリジナルではなく、複製されたコピーになることに注意してください。

于 2008-10-13T13:09:04.537 に答える
2

私は得た

drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
于 2011-06-20T05:58:22.920 に答える