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>
.
.
.

我希望修改可拖动项目，然后将其附加到sortable。这怎么可能？

Answer 1

在droppabale容器的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;
  }

jQueryui draggable和sortable追加自定义html

1 个答案: