javascript - 在 jquery ui 选项卡之间拖放内容

Question

我正在使用 jquery ui 选项卡，我有三个选项卡，当我从 tab1 拖动内容并将其放在 tab2 标签上时，它应该放在 tab2 ul 元素内，但它不起作用。当我 console.log ui.draggable 时，它​​显示相同的选项卡元素，但我想删除选项卡元素。这是我的代码。

<div id="idea-field-form">
   <div id="**idea-tabs**">
      <ul class="headerBackground">
         <li class="droppabletab"><a href="#tabs-1">super_admin</a></li>
         <li class="droppabletab"><a href="#tabs-2">super_admin</a></li>
         <li class="droppabletab"><a href="#tabs-3">super_admin</a></li>         
      </ul>
      <div id="tabs-1" class="ideaScrollable">
         <div class="sortable_tabs">
            <ul **class="element"**>
               <li class="showfields">
                  <h4 class="header-title header-background ">Text Box</h4>                  
               </li>               
            </ul>
         </div>
      </div>
      <div id="tabs-2" class="ideaScrollable">
         <div class="sortable_tabs">
            <ul class="element">
               <li class="showfields">
                  <h4 class="header-title header-background ">Text Box 1</h4>                  
               </li>               
            </ul>
         </div>
      </div>
      <div id="tabs-3" class="ideaScrollable">
         <div class="sortable_tabs">
            <ul class="element">
               <li class="showfields">
                  <h4 class="header-title header-background ">Text Box 2</h4>                  
               </li>               
            </ul>
         </div>
      </div>      
   </div>
</div>

$("#idea-tabs").tabs();
$('.element').children().draggable({
  appendTo: 'body',
  opacity: 0.9,
  helper: 'clone'
});

$('#idea-tabs').children().droppable({
  activeClass: 'ui-state-active',
  accept: '.showfields',
  tolerance: 'pointer',
  drop: function(event, ui) {
    console.log '>>>',ui.draggable
  },
  over: function(event, ui) {
    $('#idea-tabs').tabs('option', '', $(event.target).index());
    $.ui.ddmanager.prepareOffsets(ui.draggable.draggable('instance'));
  }
});

我从 http://jsfiddle.net/mcAndry/h7raxjyu/4/ 引用这个

Answer 1

将 drop 事件更改为 append 拖动的项目 (ui.draggable[0]) 到 droppable:

$('.elements').droppable({
  accept: '.element',
  tolerance: 'pointer',
  activeClass: "can-drop",
  hoverClass: "drop-here",
  drop: function(event, ui) {
    $(this).append(ui.draggable[0]);
  }
});

Updated Fiddle