javascript - 如何让人们将 LI 拖放到列表中的特定位置？ (控制台日志问题)

Question

我面临两个问题，其中一个是目标，另一个是无法从 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 中，您可以将“Fiction”拖到右侧，但如果您这样做，然后将“Nonfiction”拖到“Nonfiction”上，“Nonfiction”只会添加到末尾；您随后无法将“非小说”拖到“小说”上方和之前。

我想避免在这方面重新发明轮子；我想象有一些标准模式，例如“将要删除的 LI 直接放在目标 UL 的 LI 之前，目标 UL 的 LI 到页面顶部的距离最近，但仍然等于或大于删除的 LI 到页面顶部的距离。”

现在回到我面临的另一个问题:要么 jQuery('#selection').append(ui.draggable); 正在工作，或者其他东西正在做同等的工作，但没有一个我的 console.log() 似乎已被报告。

我对如何实现某些东西有一些想法，但在我处理事情时内省(introspection)并获取 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

那么您想将可拖动对象连接到可排序对象吗？这是一个简单的方法。完全摆脱 droppable，只需将“connectToSortable”规则添加到您的 Draggable 中即可。因此，#selection 仍然是可排序的，#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 元素都是可排序的。希望对您有帮助!