У меня есть небольшое приложение перетаскивания, которое я создал. Он работает нормально, но есть небольшая проблема, когда я перетаскиваю элемент в недоступное место.
Он должен получить текст из HTML (который есть) и обновить другой div, чтобы показать пользователю, что они перетащили.
К сожалению, он всегда возвращает одно и то же имя, независимо от того, какой элемент списка вы перетаскиваете. Это первый в списке, поэтому первый экземпляр этого класса.
В любом случае, мы можем получить правильную метку для перетаскиваемого элемента?
Вот мой jQuery
$(function() {
$( ".drag_me" ).draggable({ revert: "invalid" });
$( ".choc2_bowl" ).droppable({
drop: function( event, ui ) {
$( this )
var htmlString = $('.choc_label').html();
$('.choc2_flavour').text( htmlString );
ui.draggable.fadeOut(500);
}
});
});
Вот список в моем HTML (это сокращено для этой демонстрации, но список динамический из БД.
<div class="choc2_select">
<ul>
<li class="drag_me"><div ><img src="RASPBERRY.png" /></div><div class="choc_label">Raspberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Strawberries</div></li>
<li class="drag_me"><div ><img src="DRIED-BLUEBERRIES.png" /></div><div class="choc_label">Blueberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Cranberries</div></li>
</ul>
</div>
Любая помощь будет принята с благодарностью!
Саймон
Вам нужно настроить таргетинг на choc_label
внутри перетаскиваемого элемента, поэтому используйте
$(".choc2_bowl").droppable({
drop: function (event, ui) {
var htmlString = ui.draggable.find('.choc_label').html();
$('.choc2_flavour').text(htmlString);
ui.draggable.fadeOut(500);
}
});