如何让人们将 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" 只会添加到最后；您不能随后将 "Nonfiction" 拖到 "Fiction".

之上和之前

我想避免在这上面重新发明轮子；我想有一些标准模式，比如 "Put the LI being dropped immediately before the target UL's LI that has the lowest distance to the top of the page but is still equal or greater than the dropped LI's distance to the top of the page."

现在 return 我面临的另一个问题：要么 jQuery('#selection').append(ui.draggable); 正在工作，要么其他东西正在做同样的工作，但是我的 console.log 的 none ()s好像被举报了

我对如何实现某些东西有一些想法，但是在我处理事情的同时反省并获得 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>

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

Answer 2

您只需使用 jquery ui sortable 即可实现您想要的效果。如果你想在项目添加到选择时得到通知，你可以监听接收事件。

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

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

如何让人们将 LI 拖放到列表中的特定位置？（console.log 个问题）

How can I let people drag and drop LI's to a specific place in a list? (console.log issues)

javascript

jquery

drag-and-drop

jquery-ui

jquery-ui-draggable

如何让人们将 LI 拖放到列表中的特定位置？ （console.log 个问题）

How can I let people drag and drop LI's to a specific place in a list? (console.log issues)

javascript

jquery

drag-and-drop

jquery-ui

jquery-ui-draggable

如何让人们将 LI 拖放到列表中的特定位置？（console.log 个问题）