web-dev-qa-db-ja.com

jQueryのドラッグアンドドロップ-ドラッグされている要素を取得する方法

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など。動作しないようです。

javascriptjquerydrag-and-drop
36
alexmac

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)  
       }
37
redsquare
$(ui.draggable).attr("id")

...

14
Zak

Ui.draggable（）はもう機能しないようです。使用できるIDを取得するには

$(event.target).attr("id");
13
karvonen

2017年に機能する回答

多くの時間が経ちましたが、現在受け入れられている答えはもはや機能しないことがわかりました。

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

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

ここで、_ui.helper.context_はドラッグしようとしている元のオブジェクトを指し、clone()はクローンバージョンを指します。

編集

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

_$('#myDroppable').droppable({
    drop: function(event, ui){
        console.log(ui.draggable.context)
                 OR
        console.log(ui.draggable.clone() )
    }
})
_
6
Maurits Moeys

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

event.target.id

私のために働いた。

6
Daniel Mlodecki

redquareは正しい、関数内でui.draggableを参照：

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

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

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

3
Adam Bellaire

私は得た

drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
2
Desperado

jquery ui操作でクローンオブジェクトを操作する方法？

UIの外部htmlをターゲットにし、通常のhtml jqueryセレクターを使用します

var target_ui_object_html=$(ui.item.context).attr("your attributes");

属性=> id、class、rel、alt、titleまたはdata-name、data-userなどのカスタム属性

0
Shailesh Dwivedi