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

Question

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

я могу это сделать из перетаскиваемых в сбрасываемую область, используя следующий в функции для «капли:» в 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) .replaceWith изменяет основное поле, которое перетаскивается, так что это не работает. И я попробовал $ (this) .replaceWith, но это обновляет отсортированную область (.sortlist).

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

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

Answer 1

Я думаю, что я сработал. Немного взломанный, но, похоже, работает!

мне нужно использовать $ («список сортировки ли:. Последний»), чтобы получить доступ к перетаскивается элемент ...

Answer 2

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

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

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

Answer 3

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

$(".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

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

Answer 5

Вы могли бы получить тащил пункт в beforeStop события:

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

Использование beforeStop события вместо получить было достаточно для меня:

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