Javascript 拖放；在jquery ui选项卡之间放置内容

我使用jQueryUI选项卡，我有三个选项卡，当我从tab1拖动内容并将其放置在tab2标签上时，它应该放在tab2ul元素中，但它不工作。当I 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'));
  }
});

文本框




文本框1




文本框2


$（“#创意标签”）.tabs（）；
$（'.element'）.children（）.draggable({
附于：'正文'，
不透明度：0.9，
助手：“克隆”
});
$（“#创意标签”）.children（）.dropable({
activeClass:“ui状态处于活动状态”，
接受：'.showfields'，
公差：“指针”，
drop：函数（事件、用户界面）{
console.log'>>>'，ui.draggable
},
结束：功能（事件、用户界面）{
$（'#idea tabs'）.tabs（'option'，''，$（event.target.index（））；
$.ui.ddmanager.prepareOffsets（ui.draggable.draggable（'instance'））；
}
});

---

我从将

drop

事件更改为

append

将拖动的项（

ui.draggable[0]

）添加到可拖放项：

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

---

老兄，太棒了：）