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

Question

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

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

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

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

$(".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) .replace с изменением перетаскиваемого основного поля, поэтому это не работает. И я пробовал $ (this) .replaceWith, но это обновляет сортируемую область (.sortlist).

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Думаю, я с этим справился.Немного странно, но, похоже, работает!

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

Answer 5

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

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

$(".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');
  }
});