Как получить доступ к идентификатору перетаскиваемого элемента, который распадается на сортируемый

Я использую библиотеки JQuery для реализации перетаскивания.

Как мне получить элемент, который перетаскивается при его удалении в отсортированный список?

Я хочу, чтобы идентификатор div был вытащен. Следующий элемент перетаскивается:

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

У меня есть стандартная функция перетаскивания из их примера

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

остановка функции в разделе перетаскивания со следующим кодом возвращает правильное значение

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

И это сортируемый элемент:

<ul id="sortable"><li>test</li></ul>

и его функции:

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

Я пробовал различные ui.id и т.д., которые, похоже, не работают.

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

throws undefined.

Обновление

Извините, моя вина:) Как говорила моя мама - "Прочитайте API до кодирования". ui.item.attr('id') работает нормально.

Ответы

Ответ 1

Try

receive: function(event, ui) { 
  $(ui.item).attr("id")
}

Согласно документации, получение (действительно, все обратные вызовы для сортировки) получает два аргумента. Второй аргумент должен содержать:

  • ui.helper - текущий помощник элемент (чаще всего клон пункт)
  • ui.position - текущая позиция помощник
  • ui.offset - текущая абсолютная позиция помощника
  • ui.item - текущий перемещенный элемент
  • ui.placeholder - заполнитель (если вы определили один)
  • ui.sender - сортируемый, где вещь возникает (существует только если вы перейдите из одного подключенного списка в другой)

Ответ 2

Кажется, что context из ui.item изменяется между событием beforeStop и событием receive.

В моем случае я пытаюсь установить идентификатор элемента в сгенерированное значение и

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

не работает для меня

Итак, вы можете обойти это:

beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}

Ответ 3

У меня была аналогичная проблема, и у меня возникли проблемы с доступом к вспомогательному элементу в стартовом событии. То, что я закончил, это установить атрибут helper для функции, которая возвращает некоторый пользовательский HTML. Я смог получить доступ к этому HTML в стартовом мероприятии без каких-либо проблем.

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}

Ответ 4

Из jQuery UI перетаскиваемые документы:

Если вы хотите не просто перетаскивать, но drag-and-drop, см. интерфейс jQuery Плагин Droppable, который обеспечивает drop для перетаскиваемых объектов.

См. http://docs.jquery.com/UI/API/1.7/Droppable

Ответ 5

Да, эта проблема при смешивании сортировок перетаскивает droppables и т.д. Сделать сортируемый контейнер также недоступным:

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

$('#sortable').droppable({
    accept: '.control',
    drop: function(e, ui){
        var your_draggable_element = $(ui.draggable);
        var your_helper = $(ui.helper);
    }
});

который должен работать

Ответ 6

У меня был успех с использованием события beforeStop для сортировки.

Из здесь

beforeStop: это событие запускается, когда сортировка останавливается, но когда добавлен placeholder/helper.

$( "#something" ).sortable({
  beforeStop: function(event, ui) {
     //you should check if ui.item is indeed the one you want!
     item_id = $(ui.item).attr('id');
     $(ui.item).html('I'm changing the dropped element in the sortable!');
  }
});

Ответ 7

Кажется немного взломанным - но это удалось! Я должен использовать $('. Dragrow1 li: last')

Ответ 8

Вы можете использовать атрибут пользовательских данных для хранения идентификатора перетаскиваемых элементов. Этот атрибут по-прежнему присутствует на выпавших элементах. Исходный код:

<div class="..." data-id="item_id">
    ...
</div>

Используя $('dropped item").data('id') в сортировке, чтобы получить идентификатор:

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});

Ответ 9

$( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  cancel: ".disabledItem",
  items: "li:not(.disabledItem)",
  receive: function(event,ui){

  **var page = ui.item.attr('value');**

  var user = $("#select_users").val();