jQuery UI可排序 - 替換已刪除項目的內容

Question

我有三個街區，“可拖動”，“可排序”和“可放置”

在“draggable”里面，我有幾個像這樣構建的元素：

<li class="draggable ui-draggable ui-draggable-handle" id="header-1">
 <img src="http://placehold.it/150x100">
</li>

這些元素可以拖動到“可排序”，拖到這里的元素可以放入“droppable”，這將它們從“可排序”中刪除它基本上刪除它們。

如何在不將圖像替換為“可拖動”的情況下將新圖像中的圖像替換為“可排序”的圖像？

這是我嘗試過的：

我已經嘗試將其添加到“draggable”：

start: function (event, ui) {
     $(this).addClass('testing');
 }

這是在當前拖動的項目中添加“.testing”類。

我已將此添加到“可排序”：

     receive: function (event, ui) {
     $('.testing').replaceWith('<img src="http://placehold.it/400x300">');

這里的問題是替換整個標記，包括“li”父級，我想只替換“img”元素。

這是一個現在如何工作的jsbin 。

Answer 1

很抱歉誤解了這個問題。 你所描述的是：在不修改原始draggable情況下修改掉落元素（如果我再次誤解，請告訴我）。

這通常使用helper選項完成，通常使用函數，但helper: "clone"也可以使用。 這將導致刪除draggable的克隆。 這意味着您可以將選擇器限制為當前容器，並且您根本不需要".testing"類（當然，如果它讓您更容易看到正在發生的事情，請隨時保留它）：

receive: function (event, ui) {
    $('.testing', this).replaceWith('<img src="http://placehold.it/400x300">');
    // or...
    $(this).find('.testing').replaceWith('<img src="http://placehold.it/400x300">');
    // or without the superfluous class...
    $(this).find('li.draggable').replaceWith('<img src="http://placehold.it/400x300">');
    // or to keep the li tags as per my original post's suggestion...
    $('li.draggable > img', this).replaceWith('<img src="http://placehold.it/400x300">');
}

請記住，jQuery的clone只生成DOM節點的副本，不保留任何jQuery屬性。 丟棄的幫助器將不再是draggable窗口小部件（盡管在您的情況下，您使用的是sortable ，但仍然可以拖動它）

Answer 2

在接收事件時，獲取先前刪除的元素。 如果此元素存在附加到發件人。

$(".connect").on("sortreceive", function(event, ui) {
  var prevChild = $(event.target).children().not(ui.item);
  if(prevChild.length > 0){
    $(ui.sender).append(prevChild);
  }
});