jQuery przeciągnij i upuść - jak uzyskać element przeciągany

Question

Używam biblioteki jQuery do implementacji przeciągania i upuszczania.

Jak uzyskać dostęp do elementu, który jest przeciągany po upuszczeniu?

Chcę uzyskać identyfikator obrazu wewnątrz elementu div. Następny element jest przeciągany:

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

mam średnia funkcję spadł z ich przykładu:

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

Próbowałem różnych ui.id itd., Które nie wydają się działać.

Answer 1

Czy to nie jest ui.draggable?

Jeśli go tutaj (w Firefox i zakładając, że masz Firebug) i spojrzeć w konsoli firebug będziesz widzieć Robię console.dir z ui.draggable obiektu, który jest div przeciągane

http://jsbin.com/ixizi

Dlatego trzeba kod w funkcji rozwijanej jest

 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) 
     } 

Answer 2

redquare ma rację, wewnątrz funkcji odnosi się do ui.draggable:

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

Ta właściwość wskazuje na przedmiot, który jest przeciągany.

Należy zauważyć, że jeśli używasz sklonowanych "pomocników", przeciągany będzie klonowaną kopią, a nie oryginałem.

Answer 3

$(ui.draggable).attr("id")  

...

Answer 4

ui.draggable() nie wydają się pracować dłużej. Aby uzyskać identyfikator można użyć

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

Answer 5

mam

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

Answer 6

Próbowałem większość z wyżej wymienionych, ale w końcu tylko

event.target.id 

pracował dla mnie.

Answer 7

ODPOWIEDŹ, który działa w 2017

Dużo czasu minęło od i uważam, że obecna odpowiedź zaakceptowany już nie działa.

Rozwiązanie, które obecnie działa:

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

Tutaj ui.helper.context odnosi się do oryginalnego obiektu, który próbujesz przeciągnąć i clone() odnosi się do wersji sklonowane.

EDIT

Powyższe jest zbyt zobaczyć, który obiekt jesteś przeciąganie za pomocą funkcji draggable(). Do wykrywania co draggable obiekt został usunięty w droppable(), następujące prace:

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