可排序列表元素在复杂的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伪元素出现问题，因为它们是绝对定位的，因为伪内容被插入到包含元素中。

这里是一个与默认静态定位大致工作的示例。我希望它能起到作用。