Question

我正在使用两个UL并使用javascript水平滚动它们，但是当在列表之间拖动列表项时，它们会跳跃大约10-20 px。这发生在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正在以不同于Firefox的方式处理默认css属性的问题。您可以将选项传递给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，需要覆盖。

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

在Chrome中拖动时，如何阻止列表项跳转？

1 个答案: