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

可排序的列表元素为复杂的css列表留下了瑕疵

1 个答案: