jQuery 可拖动和可放置防止掉落

Question

我正在使用此代码将元素从一个容器拖到另一个容器中。我只想检测丢弃事件，然后执行我自己的操作（我不希望项目自动丢弃！）。使用当前代码，这很好用。但是，项目在 drop_container 中不可排序。如果我在 drop_container 上添加可排序（当前在代码示例中注释掉的内容），那么项目在 drop_container 中是可排序的，但是项目会自动放入我不想要的 drop_container 中。我该如何解决这个问题？

$("#drag_container li").draggable({
  connectToSortable: "#drop_container",
  helper: "clone",
  revert: "invalid"
});

var droppable = $("#drop_container").droppable({
  drop: function(event, ui) {
    console.log('drop')
    var _item = jQuery(ui.draggable).clone(true,true).appendTo(droppable);
   
  }
})/*.sortable({
  helper: "clone",
})*/;

#drag_container li {
  clear: both;
  float: left;
}

#drop_container {
  clear: both;
  height: 300px;
  width: 400px;
  background-color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.11/draggable.min.js"></script>

<ul id="drag_container">
  <li id="one">One</li>
  <li id="two">Two</li>
  <li id="three">Three</li>
  <li id="four">Four</li>
  <li id="five">Five</li>
  <li id="six">Six</li>
</ul>

<div id="drop_container">Drop Here</div>

Answer 1

尝试将 sortable 放在 draggable 中

$("#drag_container li").draggable({
  connectToSortable: "#drop_container",
  helper: "clone",
  revert: "invalid"
});

var sortable = $("#drop_sortable").sortable({
  helper: "clone",
})

$("#drop_container").droppable({
  drop: function(event, ui) {
    console.log('drop')
    var _item = jQuery(ui.draggable).clone().appendTo(sortable);
  }
})

#drag_container li {
  clear: both;
  float: left;
}

#drop_container {
  clear: both;
  height: 300px;
  width: 400px;
  background-color: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.11/draggable.min.js"></script>

<ul id="drag_container">
  <li id="one">One</li>
  <li id="two">Two</li>
  <li id="three">Three</li>
  <li id="four">Four</li>
  <li id="five">Five</li>
  <li id="six">Six</li>
</ul>

<div id="drop_container">
  Drop Here
  <ul id="drop_sortable"></ul>
</div>