我的页面底部有一个可排序的无序列表,在Firefox中非常适用.但是,在Safari/Chrome中,当我想拖动时,抓取的listitem会立即跳到页面顶部,就像UL在窗口顶部一样.有谁知道这里发生了什么?
谢谢.莱克斯.
这是代码:
HTML(和PHP):
<ul id="list">
<?
foreach($downloads as $download)
{
echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->title."</a></li>";
}
?>
</ul>
Run Code Online (Sandbox Code Playgroud)
CSS:
ul#list {
padding: 10px 0;
display: block;
}
ul#list li {
background: #fff;
padding: 10px;
color: #bc1e2c;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
font-weight: bold;
margin: 10px 0;
display: block;
}
ul#list li:hover {
background: #212121;
color: #fff;
cursor: move;
}
Run Code Online (Sandbox Code Playgroud)
JS:
$(".alter-content ul#list").sortable({
update : saveSortorder,
containment: 'parent'
});
Run Code Online (Sandbox Code Playgroud) 请首先检查这个几乎相同的问题:jQuery Sortable List - 滚动条在排序时跳起来
我有完全相同的问题,只是我尝试了所有建议的解决方案,没有运气
这是重现的方式
这是代码(另见JSFiddle)
HTML
<ul id="panel" class="scroll">
<li class="content" style="background-color:red">item1</li>
<li class="content" style="background-color:green">item2</li>
<li class="content" style="background-color:blue">item3</li>
<li class="content" style="background-color:gray">item4</li>
<li class="content" style="background-color:yellow">item5</li>
</ul>?
Run Code Online (Sandbox Code Playgroud)
JavaScript的
$(function() {
$("#panel").sortable({
items: ".content",
forcePlaceholderSize: true
}).disableSelection();
$(".content").disableSelection();
});?
Run Code Online (Sandbox Code Playgroud)
CSS
.scroll{
overflow: scroll;
border:1px solid red;
height: 200px;
width: 150px;
}
.content{
height: 50px;
width: 100%;
}
?
Run Code Online (Sandbox Code Playgroud)
尝试接受答案的概念之后的代码(在JSFiddle中)(没有运气)
我可以尝试理解它为什么会发生(列表得到"缩短"一小段时间),但所有尝试使用占位符或助手来避免它也不起作用.我觉得我几乎没有尝试任何"滚动"选项的排列,没有运气
浏览器我试过
IE9,Firefox 10.0.1和Chrome 17
JQuery版本
核心1.7.1,UI v …