在jQuery UI中拖动排序的小故障

我遇到的问题是，每当我尝试拖放一个句柄，在拖放的过程中，正文文本将不会与文本保持一致在最后附上的代码中加以说明。在jQuery UI中拖动排序的小故障

为什么我宁愿不把手柄放在<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>

来源

2009-08-06 FurtiveFelon

的问题是，当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; }

来源

2009-08-06 07:05:57 Alconja

在jQuery UI中拖动排序的小故障

回答

相关问题