我怎样才能让人们将LI拖放到列表中的特定位置？ （console.log问题）

Question

我面临两个问题，其中一个是目标，其中一个是无法从console.log（）调用中获取信息。

让我们先看看目标：

我在https://jsfiddle.net/L7sbhzzj/有一个JSfiddle来处理我正在进行的项目。我正在处理的代码是：

jQuery('.collection').droppable(
    {
    'accept': '.collection > li',
    'drop': function(e, ui)
        {
        console.log('Reached here!');
        console.log(this);
        jQuery('#selection').append(ui.draggable);
        }
    });

基本上，我希望人们能够将元素拖放到列表中的特定位置。因此，在JSfiddle中，您可以将“Fiction”拖动到右侧，但如果您这样做然后拖动“Nonfiction”，则“Nonfiction”仅添加到结尾;你不能随后将“非小说”拖到“小说”之上和之前。

我想避免重新发明轮子;我想有一些标准模式，比如“将LI放在目标UL的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答案的完全双面变体？

谢谢，

Answer 1

所以你想把一个draggable连接到一个可排序的？这是一个简单的方法。完全摆脱dropable，只需添加＆＃39; connectToSortable＆＃39;统治你的拖延。因此，＃select仍然是可排序的，而#source仍然是可拖动的，可以放在#source上的任何位置。

＆＃13;

＆＃13;

jQuery(function() {

  $(".collection").sortable({
  });
  
  jQuery('li', jQuery('.collection')).draggable({
    'connectToSortable': '.collection',
    'cancel': 'a.ui-icon',
    'revert': 'invalid',
    'containment': 'document',
    'cursor': 'move'
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

所以我更新了上面的帖子，使其在两个方向都有效。我没有使用这两个元素的ID，而是使用了他们共同的类。两个.collection元素都是可排序的，并且都是connectToSortable .collection元素。希望它有所帮助！

Answer 2

你可以使用jquery ui sortable来实现你想要的。如果您希望在项目添加到选择时收到通知，您可以收听接收事件。

jQuery(function()
{
 jQuery( "#source" ).sortable({
   connectWith: "#selection",
}).disableSelection();

jQuery("#selection").sortable({
    receive: function() {
    console.log("changed");
   }
})
});