在chrome中拖动时如何阻止列表项跳跃？

Question

我正在使用两个 UL 并使用 javascript 水平滚动它们，但是当在列表之间拖动列表项时它们会跳跃大约 10-20 像素。这发生在 chrome 中，但不在 Firefox 中。问题是，在将 UL Li 设置为 float:left 时，它在 chrome 中已修复，但这会破坏 Firefox 中的整个内容（列表不会停留在一行上）。救命！

这是网页，请在webkit/chrome和firefox中打开

http://www.senseculture.com/timeline_new.html

我用于可拖动的代码是：

<script>
  $(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content"
        }).disableSelection();
    });
</script>

Answer 1

似乎是 Chrome 对待默认 css 属性的方式与 Firefox 不同的问题。您可以将一个选项传递给Selectable 以向placeholder 添加一个类 - 这样您就可以轻松地为placeholder 设置样式：

$(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".timeline_content",
            placeholder: "timeline-placeholder"
        }).disableSelection();
    });

以下风格（虽然有点奇怪）对我有用：

.timeline-placeholder {
    display:  inline !important;
    padding:  0 99px;
    width:  2px;
}

我一般不喜欢使用!important / 限制它的使用，但placeholder 的默认行为是设置为display: block，需要被覆盖。

编辑：我找到了解决您问题的方法，但没有找到原因 - 有兴趣看看是否有人知道是什么属性或属性组合导致了该问题。