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

dropdroppabale コンテナーの場合、ドラッグされた .xml に関するすべての情報を含む変数にアクセスでき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;
  }