jQuery UI可排序-替换掉的项目的内容

jQuery UI sortable - replace content of dropped item

本文关键字：项目 换掉 替换 UI 排序 jQuery      更新时间：2023-09-26

我有三个block， "draggable"， "sortable"answers" dropable "

在"draggable"里面，我有几个像这样的元素:

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

这些元素可以被拖放到"sortable"中这里的元素可以被拖放到"droppable"中也就是把它们从"sortable"中移除基本上就是把它们删除了

我怎样才能用一个新的图像替换掉到"可排序"的图像而不替换"可拖动"的图像?

这是我尝试过的:

我试过把这个添加到"draggable":

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

这是添加"。类对当前拖动项进行测试。

，我已经把这个添加到"sortable":

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

这里的问题是要替换整个标记，包括"li"父元素，而我只想替换"img"元素。

这是一个jsbin现在是如何工作的。

很抱歉误解了你的问题。您所描述的是:在不修改原始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，它仍然可以让您拖动它)

在接收事件时，获取上一个被删除的元素。如果此元素存在，则追加到发送方。

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