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

【问题标题】：removing item from accordion after drag拖动后从手风琴中删除项目
【发布时间】：2015-05-26 09:20:04
【问题描述】：

我在屏幕上有 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>

有什么建议吗？

提前致谢

【问题讨论】：

你能做一个小提琴吗？
给你：jsfiddle.net/s0011568344/4dh1kfjg/4
顺便说一句，我更新了代码，如果它是你要找的，请告诉我
你有没有看下面的小提琴。是你想要的吗？

标签： javascript jquery jquery-ui drag-and-drop accordion

【解决方案1】：

好的，所以我查看了你的小提琴，这有点令人困惑，所以我最终做了一个我认为你想要的新小提琴。

我相当简化了代码。检查DEMO

$(function () {

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

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

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

});

【讨论】：