我正在使用 jQuery 创建一组可水平排序的元素,这些元素也可以通过右侧(东)句柄调整大小。问题是在调整元素大小后,当我移动它的水平位置时,在移动过程中元素会跳到页面顶部。
HTML
<div id="spacer"></div>
<div id="box">
<div id="list">
<div class="resize">ONE</div>
<div class="resize">TWO</div>
<div class="resize">THREE</div>
</div>
</div>
JAVASCRIPT
$(function() {
$('#list').disableSelection().sortable({
scroll: true,
placeholder: 'placeholder',
containment:'parent',
axis: 'x'
});
$('.resize').resizable({
handles: 'e'
});
});
CSS
#spacer {height: 100px}
#box {
height: 40px;
width: 500px;
float: left;
}
#list {
background-color:blue;
white-space:nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
.resize {
background-color:darkgray;
height:40px;
width:100px;
cursor:move;
display:inline-block;
}
.placeholder {
display:inline-block;
height: 1px !important;
}
.ui-resizable-handle {
height:15px;
width: 20px;
background-color:red;
cursor: pointer;
}
我究竟做错了什么?jsFiddle 在这里。