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

Question

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

Answer 1

В демонстрационной версии, на которую вы ссылаетесь, на самом деле есть ошибка; после того, как вы перетащите элемент вниз, он вставит клонированный li с id, который является дубликатом брата, в DOM, так что будьте осторожны (ошибка была подана по этому поводу, но никаких действий вокруг нее нет ).

Я сделал несколько вещей, чтобы добиться этого:

1. Чтобы обойти ограничение демонстрации, которое я описал выше, вместо этого примените class к перетаскиваемым элементам, которые будут связаны с sortable:

   <ul>
       <li class="new-item ui-state-highlight">Drag me down</li>
   </ul>
   

2. Сделать элементы этого класса перетаскиваемыми вместо выбора элемента с помощью id:

    $(".new-item").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
   

3. Нажмите на событие 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/

Надеюсь, это поможет.

Answer 2

Если вы не боитесь доступа к внутреннему состоянию 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 (текущая версия на момент написания этой статьи).

Answer 3

И если вам нужен еще один очень грубый способ получить этот элемент, просто удалить его или что-то еще, просто укажите его в выпадающем списке как

var _clone = $(".ui-draggable-dragging");

Конечно, этот класс удаляется только ПОСЛЕпадение, так что ссылка теряется, и вы не можете делать что-то, что не является немедленным.

Ответ выше является более надежным, но если вы в сумасшедшем порыве ...