复杂 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 是一个大致适用于默认静态定位的示例。我希望它能达到目的。