JQuery UI Draggable/Sortable - получить ссылку на новый элемент

Я использую jQuery UI Draggable/Sortable demo (http://jqueryui.com/demos/draggable/#sortable) для моего проекта. Мне нужно получить ссылку на <li>, которая клонируется в сортировку, когда сортируемая ее получает. Я попробовал сортируемое событие приема, но это только дает ссылку на оригинальное draggable <li>, а не на его клон.

Ответы

Ответ 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 (текущая версия со времени написания).