拖动后从手风琴中删除项目

Question

我在屏幕上有 4 个手风琴元素。用户可以将元素从一个手风琴拖放到另一个手风琴。我已经设法实现了可以正常工作的拖放操作。但是，将项目从一个手风琴拖到另一个手风琴后，我想从手风琴中删除该特定项目。

代码：

$(function() {
$( "#employee2" ).accordion();
$( "#employee2 li" ).draggable({
  appendTo: "body",
  helper: "clone"

});

 $("#destination").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        $(ui.draggable).clone().appendTo(this); // accordion not work 
        $( this ).find(".destination3").remove(); 
       //  ui.draggable.draggable('disable').appendTo(this);
        //$(ui.draggable).appendTo(this); // accordion work but not clone
        $(".employee2").accordion('refresh');

    }
}).sortable({
  items: "li:not(.destination)",
  sort: function() {
    // gets added unintentionally by droppable interacting with sortable
    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
    $( this ).removeClass( "ui-state-default" );
  }
});
  $("#destination2").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        $(ui.draggable).clone().appendTo(this);
        //$(ui.draggable).appendTo(this); // accordion work but not clone
        $(".employee2").accordion('refresh');
    }
}).sortable({
  items: "li:not(.destination2)",
  sort: function() {
    // gets added unintentionally by droppable interacting with sortable
    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
    $( this ).removeClass( "ui-state-default" );
  }
});
});

手风琴中的每一项都是这样放置的：

<h2><a href="#">E Lower </a></h2>
 <div class = "eu">
      <ul id="destination4" class="accordion4">
        <li>Employee 1</li>    
        <li>Employee 2</li>
        <li>Employee 3</li>
     </ul>
 </div>

有什么建议吗？

提前致谢

Answer 1

好的，所以我查看了您的 fiddle，它有点令人困惑，所以我最终做的是用我认为您想要的创建一个新的 fiddle。

我大大简化了代码。检查 DEMO

$(function () {

    $("#employee, #employee2").accordion();

    $("#destination, #destination2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

    $("#destination3, #destination4" ).sortable({
      connectWith: ".connectedSortable2"
    }).disableSelection();

});

拖动后从手风琴中删除项目

removing item from accordion after drag

javascript

jquery

drag-and-drop

jquery-ui

accordion