jQuery drag and drop - как добраться до перетаскиваемого элемента

Question

Я использую библиотеку jQuery для реализации перетаскивания.

Как мне получить элемент, который перетаскивается, когда его уронили?

Я хочу получить идентификатор изображения внутри div. Перетаскивается следующий элемент:

<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 и т. Д., Которые, похоже, не работают.

Answer 1

Разве это не ui.draggable?

Если вы зайдете сюда (в Firefox и предполагаете, что у вас есть firebug) и посмотрите в консоли firebug, вы увидите, что я делаю console.dir объекта ui.draggable, который представляет собой перетаскиваемый div

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

Answer 2

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

...

Answer 3

Кажется, что ui.draggable () больше не работает. Для получения идентификатора можно использовать

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

Answer 4

ОТВЕТЬТЕ, ЧТО РАБОТАЕТ В 2017

Прошло много времени, и я обнаружил, что текущий принятый ответ больше не работает.

Решение, которое работает в данный момент:

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

Здесь ui.helper.context относится к исходному объекту, который вы пытаетесь перетащить, а clone() относится к клонированной версии.

EDIT

Выше также видно, какой объект вы перетаскиваете, используя функцию draggable(). Для определения того, какой объект draggable был отброшен в droppable(), работает следующее:

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

Answer 5

Я пробовал большинство из вышеперечисленного, но в итоге только

event.target.id

работал на меня.

Answer 6

красный квадрат прав, внутри вашей функции см. ui.draggable:

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

Это свойство указывает на перетаскиваемую вещь.

Обратите внимание, что если вы используете клонированных «помощников», перетаскиваемой будет клонированная копия, а не оригинал.

Answer 7

я получил

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

Answer 8

Как управлять объектом-клоном в любой операции с jquery ui?

Просто настройте внешний интерфейс HTML и используйте обычные HTML-селекторы jquery

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

attribute => id, class, rel, alt, title или custom attr, например data-name , пользователь данных