0

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

正如网络上的一些示例所示，我不想将句柄放在<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>
4

1 回答 1

1

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

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

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

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

.c { width: 500px; height: 40px; position: absolute; }
于 2009-08-06T07:05:57.197 回答