jquery-ui - jQueryui 可拖动和可排序附加自定义 html

Question

我有两个列表，列表 A 可排序，列表 B 可拖动连接到列表 A。我将项目从列表 B 拖动到列表 A 中。

两个列表中的项目具有不同的 html 结构。问题是，当我将一个项目从列表 B 删除到列表 A 时，它会自动附加其原始 html 结构，因此最终图片如下:

list A
<div class="sortableItem">bla bla</div>
<div class="sortableItem">bla ble</div>
<span class="draggableItem">bla bla</span> // This is the item coming from list B
<div class="sortableItem">blew blew</div>
.
.
.

我想在将可拖动项目附加到可排序项目之前对其进行修改。这怎么可能？

Answer 1

在 drop如果您的 droppabale 容器发生事件，您可以访问 ui包含有关拖动的所有信息的变量 div .

$("ul:first li", $tabs).droppable({
  accept: ".sortable .dragItem",
  hoverClass: "ui-state-hover",
  start: function (event, ui) {},
  stop: function (event, ui) {},
  receive: function (event, ui) {},
  drop: function (event, ui) {

    //Here you can manipulate the dragged item to create whatever you want
    var newDiv = '<div class="sortableItem">'+ui.draggable.html()+'toto</div>';

    //Add the new data to your container
    $(this).append(newDiv);
    //Or add to another container
    //$('#sortable1').append(newDiv);

    //Return true
    return true;
  }