Question

使用jquery ui标签时，我有三个标签，当我从tab1＆amp;将它放在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

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

1 个答案: