Question

我遇到的问题是，每当我尝试使用手柄拖放时，在拖放过程中，正文文本将不会与文本保持对齐，这在最后附加的代码中有说明。

我不想将句柄放在<p>标签中，正如网上的一些示例所示，我希望允许用户在p标签之间编辑内容因此，在显示表单之前，我不想去做很多预处理（我可能会在p标签周围添加更多内容）。

如果有人能对此事有所了解，我们将不胜感激！

代码，使用谷歌CDN，所以它应该工作：

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#container').sortable({
            revert:true,
            handle:'.handle',
        });
    });
    </script>
</head>
<div id="container">
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>

Answer 1

问题在于，当拖动div来进行排序时，jQuery有效地将draggable（在你的情况下为div.c）设置为绝对定位（因此它可以在屏幕上移动它））。不确定确切的CSS怪癖（可能是比我能更全面解释的人更聪明），但基本上你的浮动.handle在绝对定位的容器内与p一起有点奇怪。 p上的边距现在似乎是从div的内部设置而不是与它们合并，而span仍然浮动到div的左上角。

一种解决方案是向span添加与p相同的上边距，但仅限于拖动时。换句话说，添加以下CSS（我认为1em应该是应用于p顶部的默认边距）：

.ui-sortable-helper .handle {
    margin-top: 1em;
}

如果您有兴趣深入研究CSS，请将以下代码添加到上面的代码中。您将重现问题而无需涉及可排序的数据：

.c { width: 500px; height: 40px; position: absolute; }

在jquery ui中通过句柄可拖动排序的故障

1 个答案: