jquery - 复杂 css 列表的可排序列表元素故障

Question

我正在尝试使用 jquery Sortable 在 html 嵌套列表上实现可排序功能插入。基于它的教程。

它适用于没有 css 的简单列表，但如果我应用某些样式，它就会出现故障。我所说的故障是指动画飞离了光标。

我的树:

<ul class="simple">
    <li>Item 1</li>
    <li>Item 2
        <ul><li>Item 2.1</li></ul>
    </li>
</ul>

JS:

var oldContainer;
$(".simple").sortable({
  group: 'nested',
  afterMove: function (placeholder, container) {
    if(oldContainer != container){
      if(oldContainer)
        oldContainer.el.removeClass("active");
      container.el.addClass("active");
      oldContainer = container;
    }
  },
  onDrop: function (item, container, _super) {
    container.el.removeClass("active");
    _super(item);
  }
});

我无法发布 CSS，因为它太大了。这是一个 JsFiddle .

我无法判断是不是我的编码问题，或者插件不是设计为以这种方式使用的。 我的问题是，如何修复动画？或者我应该使用什么其他插件？

Answer 1

问题出在相对定位的列表项中，如果列表项是相对的，插件似乎无法计算左侧和顶部位置，因此它返回相对于第一个非静态定位父项的位置。另一方面，由于绝对定位，删除 position 属性将导致 :before 和 :after 伪元素出现问题，因为伪内容被插入到包含元素中.

Here 是一个大致适用于默认静态定位的示例。我希望它能达到目的。