Я использую jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) для моего проекта. Мне нужно получить ссылку на <li>
, которая клонируется в сортировку, когда сортируемая ее получает. Я попробовал сортируемое событие приема, но это только дает ссылку на оригинальное draggable <li>
, а не на его клон.
JQuery UI Draggable/Sortable - получить ссылку на новый элемент
Ответ 1
В демо вы ссылаетесь, на самом деле есть ошибка; после того, как вы перетащите элемент вниз, он вставляет клонированный li
с id
, который является дубликатом его брата в DOM, поэтому остерегайтесь (a bug было подано об этом, но вокруг не было никакой активности).
Я сделал несколько вещей, чтобы добиться этого:
-
Чтобы обойти ограничение описанной выше демонстрации, вместо этого примените
class
к элементам перетаскивания, которые будут связаны сsortable
:<ul> <li class="new-item ui-state-highlight">Drag me down</li> </ul>
-
Сделать элементы с этим классом перетаскиваемыми, вместо выбора элемента
id
:$(".new-item").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" });
-
Нажмите на
stop
событие сортируемого и выполните некоторую простую логику об отброшенном элементе, используя тот факт, что элемент с классnew-item
мог быть удален только (и не просто существующий элемент в сортируемом):$("#sortable").sortable({ revert: true, stop: function(event, ui) { if (ui.item.hasClass("new-item")) { // This is a new item ui.item.removeClass("new-item"); ui.item.html("<b>HI</b>"); } } });
Обратите внимание, что вместо добавления класса-помощника вы можете использовать атрибут data-*
.
Вот рабочий пример: http://jsfiddle.net/andrewwhitaker/twFCu/
Надеюсь, что это поможет.
Ответ 2
И если вам нужен еще один очень грубый и готовый способ получить этот элемент, просто чтобы удалить его или что-то в этом роде, просто укажите его в папке
var _clone = $(".ui-draggable-dragging");
Конечно, этот класс удаляется просто ПОСЛЕ падения, поэтому ссылка теряется, и вы не можете делать ничего, что не является немедленным.
Ответ выше более надежный, но если вы в безумной спешке...
Ответ 3
Если вы не боитесь доступа к внутреннему состоянию Sortable
, вы можете сделать следующее:
$('#sortable').sortable({
receive: function() {
// Sortable.currentItem refers to the item just added.
// jQuery UI < 1.10 uses "sortable" as its data key,
// jQuery UI >= 1.10 defines an "instance" method to get the current instance.
var $item =
(
$('#sortable').data('sortable') || // jQuery UI < 1.10
$('#sortable').sortable('instance') // jQuery UI >= 1.10
).currentItem;
}
);
Fiddle: http://jsfiddle.net/t33bt/12/
Имейте в виду, что это может не работать в будущей версии jQuery UI больше, потому что он не использует официальный API. Но тем не менее он работает даже в jQuery UI 1.11 (текущая версия со времени написания).