0

我正在使用两个 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>
4

1 回答 1

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需要覆盖的行为。

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

于 2012-11-26T21:19:27.483 回答