JQuery drag and drop - как добраться до перетаскиваемого элемента
Я использую библиотеку 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 из их примера:
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) { }
});
Я пробовал различные ui.id и т. д., Которые, похоже, не работают.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
Разве это не ui.draggable?
Если вы пойдете сюда (в Firefox и при условии, что у вас есть firebug) и посмотрите в консоли firebug, вы увидите, что я делаю console.dir объекта ui.draggable, который является перетаскиваемым div
Поэтому код, который вам нужен в функции перетаскивания, -
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)
}
alexmac - заменить console.dir отладчиком; оператор, вы можете просмотреть свойство ui.draggable в окне просмотра. Не уверен, почему написано, что не определено. Какая версия FB и FF? Метод dir является стандартным для FB, см. getfirebug.com/console.html
Непосредственно перед консолью вам понадобится window.load Firebug Console (); чтобы консоль заработала.
@MDCore - Никогда не использовал и не видел, и у меня никогда не было проблем. Я предполагаю, что это когда у вас выключен FB, и вам нужно его включить. Я просто предполагаю, что он есть у всех веб-разработчиков.
У меня была старая версия firefox (2 что-то), теперь консоль работает
Это решение больше не работает, текущую реализацию см. У меня
красный квадрат прав, внутри вашей функции обратитесь к ui.draggable:
$(".drop").droppable({ accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
//do something with ui.draggable here
}
});
Это свойство указывает на перетаскиваемую вещь.
Обратите внимание: если вы используете клонированные «помощники», перетаскиваемая копия будет клонированной, а не оригинальной.
ui.draggable - это объект, но я, похоже, не могу получить div, который является перетаскиваемым элементом. ui.draggable.id или ui.draggable.innerHTML не работают.
ui.draggable.attr ('id') или ui.draggable.get (0) .id
$(ui.draggable).attr("id")
...
Ui.draggable (), похоже, больше не работает. Чтобы получить идентификатор, можно использовать
$(event.target).attr("id");
Разве он не получает идентификатор элемента, на который мы бросаем предметы?
$ (event.target) отлично работает, особенно когда вам нужно получить элемент, и вы одновременно используете перетаскиваемый и изменяемый размер.
Работает отлично, и я впервые вижу это с именем вместо ui.draggable, которое больше не работает. Спасибо!
Этот синтаксис указан как ошибка в официальной документации: developer.mozilla.org/en-US/docs/Web/Events/dragenter (Кроме того, он не работает для меня в Chrome.)
я получил
drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
Я пробовал большую часть вышеперечисленного, но в итоге только
event.target.id
работал у меня.
ОТВЕТЬТЕ, ЧТО РАБОТАЕТ В 2017 ГОДУ
Прошло много времени, и я обнаружил, что текущий принятый ответ больше не работает.
Решение, которое в настоящее время работает:
$('#someDraggableGroup').draggable({
helper: 'clone',
start: function( event, ui ) {
console.info(ui.helper.context)
console.info(ui.helper.clone())
}
})
Здесь ui.helper.context относится к исходному объекту, который вы пытаетесь перетащить, а clone() относится к клонированной версии.
РЕДАКТИРОВАТЬ
Вышеупомянутое также позволяет увидеть, какой объект вы перетаскиваете, используя функцию draggable(). Для определения того, какой объект draggable был удален в droppable(), работает следующее:
$('#myDroppable').droppable({
drop: function(event, ui){
console.info(ui.draggable.context)
OR
console.info(ui.draggable.clone() )
}
})
Как управлять объектом клонирования в любой операции пользовательского интерфейса jQuery?
Просто выберите внешний пользовательский интерфейс html и используйте обычные селекторы html jquery.
var target_ui_object_html=$(ui.item.context).attr("your attributes");
attributes => id ,class ,rel,alt ,title or custom attr like data-name , data-user
обратите внимание, что
ui.draggableбольше не поддерживается. используйте вместо него$(data.helper).attr('ppp').