Вспомогательная функция в jQuery - перетаскиваемая - PullRequest
Новая
       2

Вспомогательная функция в jQuery - перетаскиваемая

6 голосов
/ 19 июля 2011

Я пытаюсь написать функцию helper для jQueryUI, чтобы установить атрибут перетаскиваемого элемента из списка «перетаскиваемых» в список «сортируемых». (Причина, по которой мне нужно это сделать, заключается в том, что последняя версия jQueryUI удаляет атрибут 'id' отброшенных элементов)

Однако атрибут не попадает в список «сортируемых». Я делаю что-то не так в вспомогательной функции? 

$("#draggable > li").draggable({
  connectToSortable: "#sortable",
  helper: function (event) {
    var id = $(this).attr('id');
    var ret = $(this).clone();
    ret.attr('dragId', id);
    console.log('dragId: ', ret.attr('dragId'));
    return ret();
  }
});

$( "#sortable" ).sortable({
    start: function( event, ui ) {
          console.log( "sortable start: dragId=", ui.item.attr( "dragId" ) );
    },
    stop: function( event, ui ) {
          console.log( "sortable stop: dragId=", ui.item.attr( "dragId" ) );
    }
});

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

dragId: itemA
sortable start: dragId= undefined
sortable stop: dragId= undefined

Я ожидаю, что это напечатает: 

dragId: itemA
sortable start: dragId= itemA
sortable stop: dragId= itemA

Здесь - полный пример (с HTML) на JsBin

Ответы [ 2 ]

5 голосов
/ 19 июля 2011

Вы устанавливаете атрибут dragId для элемента helper , поэтому вы должны использовать ui.helper вместо ui.item: 

console.log("sortable start: dragId=", ui.helper.attr("dragId"));

EDIT: Никола Пелучетти прав в своем комментарии ниже: ui.helper действительно будет null во время события stop.Поскольку вы, вероятно, захотите использовать атрибут dragId во время этого события, обходным путем будет копирование атрибута во время события start, когда доступны и ui.helper, и ui.item: 

$("#sortable").sortable({
    start: function(event, ui) {
          ui.item.attr("dragId", ui.helper.attr("dragId"));
          console.log("sortable start: dragId=", ui.item.attr("dragId"));
    },
    stop: function(event, ui) {
          console.log("sortable stop: dragId=", ui.item.attr("dragId"));
    }
});
1 голос
/ 19 июля 2011

Единственный способ сохранить найденный мною идентификатор - добавить сбрасываемый код и этот код: 

    $( "#sortable" ).droppable({
        drop: function( event, ui ) {
            $(ui.draggable).attr('id', $(ui.helper).attr('id'));
        }
    });

Здесь есть скрипка (и должен быть лучший способ сделать это) http://jsfiddle.net/MdZwB/1/

...