如何让人们将LI拖放到列表中的特定位置？ （执行console.log问题）
我面临两个问题，其中一个是一个目标，其中之一是未能获得的console.log信息（）调用。如何让人们将LI拖放到列表中的特定位置？ （执行console.log问题）
让我们看看第一个目标：
我有一个在的jsfiddle为https://jsfiddle.net/L7sbhzzj/一个项目，我的工作。我工作的代码是：
jQuery('.collection').droppable(
{
'accept': '.collection > li',
'drop': function(e, ui)
{
console.log('Reached here!');
console.log(this);
jQuery('#selection').append(ui.draggable);
}
});
从本质上讲，我希望人们能够拖放元素列表上的特定位置。因此，在JSfiddle中，您可以将“小说”拖到右侧，但如果您这样做，然后拖过“非小说类”，“非小说类”只会添加到最后;你不可能在“小说”之前和之后拖拽“非小说类”。
我想避免重蹈覆辙;我想有一些标准模式，比如“把LI放在目标UL的LI之前，这个LI距页面顶部的距离最小，但仍等于或大于LI到页面顶部的距离”。
现在回到我面临的另一个问题：或者jQuery('#selection').append(ui.draggable);正在工作，或者其他人正在做同样的工作，但我的console.log（）中没有一个似乎被报告。
我有如何实现的东西的一些想法，但它会是不错的反思和获得的console.log（）S'诊断输出，而我工作的事情。
是在'drop'生效呢？它以其他方式工作吗？我怎样才能得到物体掉到什么元素之类的东西？
- 编辑 -
我才发现自己问的是我想做的一面。我希望人们能够将XYZ项从一个容器移到另一个容器，然后如果他们改变了主意，就可以回来。 Snowmonkey的解决方案非常适用于可排序的正确列表。但是，下面的改编失败了，也许是因为我叫了两个不兼容的增强功能：
jQuery(function()
{
jQuery('#selection').sortable(
{
});
jQuery('li', jQuery('#source')).draggable(
{
'connectToSortable': '#selection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
jQuery('#source').sortable(
{
});
jQuery('li', jQuery('#selection')).draggable(
{
'connectToSortable': '#selection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
我怎样才能得到Snowmonkey的回答完全双面变化？
感谢，
所以你要连接拖动到一个排序？这是一个简单的方法。完全摆脱droppable，只需将'connectToSortable'规则添加到您的可拖动。因此，＃选择仍然是可排序的，#source仍然是可拖动的，可以放到#source的任何位置。
jQuery(function() {
$(".collection").sortable({
});
jQuery('li', jQuery('.collection')).draggable({
'connectToSortable': '.collection',
'cancel': 'a.ui-icon',
'revert': 'invalid',
'containment': 'document',
'cursor': 'move'
});
});body {
background-color: #ccc;
font-family: Verdana, Georgia;
}
div.main {
margin-left: auto;
margin-right: auto;
width: 440px;
}
div.table {
display: table;
width: 440px;
}
div.td {
display: table-cell;
width: 50%;
}
div.tr {
display: table-row;
}
ul.collection {
background-color: white;
list-style: none;
padding-left: 0;
min-height: 100px;
padding-left: 0;
width: 200px;
}
ul.collection > li {}
ul#selection {
float: right;
}
ul#source {
float: left;
}<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="main">
<div class="table">
<div class="tr">
<div class="td">
<ul id="source" class="collection">
<li>Everything</li>
<li>Nonfiction</li>
<li>Fiction</li>
<li>Poetry</li>
</ul>
</div>
<div class="td">
<ul id="selection" class="collection">
<li>Empty</li>
</ul>
</div>
</div>
</div>
</div>所以我更新了上述职位，使其在两个方向上工作。我没有使用这两个元素的ID，而是使用了他们共同的类。两个.collection元素都是可排序的，并且都是connectToSortable .collection元素。希望能帮助到你！
你可以实现你想要的只是使用jquery ui sortable。如果您希望在项目添加到选择时收到通知，您可以收听接收事件。
jQuery(function()
{
jQuery("#source").sortable({
connectWith: "#selection",
}).disableSelection();
jQuery("#selection").sortable({
receive: function() {
console.log("changed");
}
})
});
谢谢（对于我的背景，你是如何得到你的答案格式？这很可爱！）。这可以根据需要进行排序，但如同现在在问题中编辑的那样，我希望这两种功能都可以工作。你是否愿意重读扩展的问题并告诉如何使它同时工作？谢谢， – JonathanHayward
@JonathanHayward，我更新了上面的代码块来做你正在寻找的东西。我使用了ID来明确它，但是如果你希望它能够双向工作，只需使用类而不是ID。当我在回答问题时，我点击了我的文本输入字段上方的“代码”按钮，以创建相当格式的工作代码。 ;） – Snowmonkey
好的;谢谢。有一个CSS说明我想知道你是否有评论（我是否应该提出一个单独的问题？）：如果任何一个UL为空，则它是交错的，如https://cjshayward.com/wp-content/project/staggered.png ;他们看起来是错开的，因此一个顶部与另一个的底部齐平，并且存在一个令人讨厌的闪烁效果，从左向右传递最后一个元素。我想要什么，当它们都是非空的时候会发生什么，因为它们都是在顶部一直齐平，就像在https://cjshayward.com/wp-content/project/flush.png中一样。任何方式来强制这在CSS中？ – JonathanHayward