jQuery - манипулировать удаленным элементом в сортируемом списке

Question

У меня есть перетаскиваемый список (.field), куда вы можете перетаскивать элементы из него в сортируемый список (.sortlist). Я сделал это таким образом, потому что я не хотел, чтобы основной список (.field) изменялся каким-либо образом. Это работает нормально, за исключением того, что я не могу понять, как манипулировать удаленным полем в сортируемом списке.

Я могу сделать это из перетаскиваемой области в область сброса, используя следующую функцию для drop: в droppable():

$(this).append('html code here to change content of dragged field');

Однако это не работает внутри sortable (). Мой код выглядит так:

$(".sortlist").sortable({
  receive: function(event, ui) {
    var dropElemTxt = $(ui.item).text();
    var dropElemId = $(ui.item).attr('id');
    $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>');
  }
});

$ (ui.item).replaceWith изменяет перетаскиваемое главное поле, поэтому это не работает. И я пробовал $(this).replaceWith, но это обновляет сортируемую область (.sortlist).

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

Большое спасибо, Али.

Answer 1

Вы можете получить перетаскиваемый элемент в событие beforeStop:

beforeStop: function (event, ui) { draggedItem = ui.item;},
receive: function (event, ui) { /* use draggedItem here*/ }

Мне достаточно было использовать событие beforeStop вместо receive:

beforeStop: function(event, ui) { 
        var myClassItem = $('.myClass', ui.item);
        myClassItem.bind('click', function(){ /*my function*/ });
    }

Answer 2

Я думаю, что я решил это. Немного хакерский, но, похоже, работает!

Мне нужно использовать $('. Sortlist li:last') для доступа к перетаскиваемому элементу...

Answer 3

Я следовал вашему образу мышления, но при таком подходе было несколько ошибок (иногда удаляемый элемент просто исчезал при использовании droppable + sortable). Вот то, что сработало для меня:

$(".draglist").draggable({
  start: function(e, ui) {
    draggedItem = ui.item;
  }
});

$(".sortlist").sortable({
  receive: function(event, ui) {
    //do something with the 'draggedItem' here...
    var droppedElemTxt = draggedItem.text();
    var droppedElemId = draggedItem.attr('id');
  }
  , start: function(e, ui) {
    draggedItem = ui.item;
  }
});

Answer 4

Невозможность получить доступ к удаленному элементу - известная ошибка в сортируемом интерфейсе JQuery ui. Билет содержит патч, который позволяет вам получить доступ к удаленному элементу, и это, как ожидается, будет исправлено в следующем основном выпуске.

Answer 5

Я думаю, что я действительно придумал лучшее решение... кажется, работает до сих пор...

Я прикрепил dropable к сортируемому объекту, чтобы объявить глобальную переменную перетаскиваемого элемента. Немного так:

$(".sortlist").droppable({
  drop: function(e, ui) {
    draggedItem = ui.draggable;
  }
}).sortable({
  receive: function(event, ui) {
    //do something with the 'draggedItem' here...
    var droppedElemTxt = draggedItem.text();
    var droppedElemId = draggedItem.attr('id');
  }
});