Question

我有三个街区，“可拖动”，“可排序”和“可放置”

在“draggable”里面，我有几个像这样构建的元素：

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

这些元素可以拖动到“可排序”，拖到这里的元素可以放入“droppable”中，将它们从“可排序”中移除，它基本上将它们删除。

如何在没有将图像替换为“draggable”的情况下将新图片中的图像替换为“可排序”的图像？

这是我尝试过的：

我尝试将其添加到“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"课程（当然，如果它让您更容易看到＆＃），请随时保留它39;继续）：

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＆＃39; s 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);
  }
});

jQuery UI可排序 - 替换已删除项目的内容

2 个答案: