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

在您的 droppabale 容器的 drop 事件中，您可以访问包含有关拖动的 div 的所有信息的 ui 变量。

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