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

我有两个列表，列表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>
.
.
.

列表A
布拉布拉
喋喋不休
bla bla//这是来自列表B的项
吹
.
.
.

---

我想在将可拖动项附加到可排序项之前对其进行修改。这是如何实现的？

在DropPable容器的

drop

事件中，您可以访问

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;
  }

$（“ul:first li”，$tabs）。可拖放({
接受：“.sortable.dragItem”，
hoverClass:“ui状态悬停”，
开始：函数（事件，ui）{}，
停止：函数（事件，ui）{}，
接收：函数（事件，ui）{}，
drop：函数（事件、用户界面）{
//在这里，您可以操纵拖动的项以创建所需的任何内容
var newDiv=''+ui.draggable.html（）+'toto'；
//将新数据添加到容器中
$（this）.append（newDiv）；
//或添加到另一个容器中
//$（'#sortable1'）。追加（newDiv）；
//返回真值
返回true；
}

这很酷，但可排序小部件中没有拖放事件。我可以在接收事件中附加自定义项，但原始项会自动附加。您知道有什么方法可以防止这种情况吗？在可排序小部件中使用“停止”事件，它在排序操作后被调用：