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

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

我简化了代码。查看DEMO

$(function () {

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

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

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

});

拖动后从手风琴中移除物品

1 个答案: