Jquery UI Sortable - Div滚动问题

时间:2013-07-23 10:35:23

标签: jquery jquery-ui jquery-ui-sortable

我创建了一个演示here

代码:

//使用Javascript

$(function() {
    $("#panel").sortable({
        items: ".content",
        axis:"y",
        scroll:true,
    }).disableSelection();

});

// 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>
    <li class="content" style="background-color:green">item6</li>
    <li class="content" style="background-color:yellow">item7</li>
    <li class="content" style="background-color:red">item8</li>    
</ul>

// CSS

.scroll{
    overflow:scroll;
    border:1px solid red;
    height: 200px;
    width: 150px;
    position:relative;
}
.content{
    height: 50px;
    width: 100%;
}

在那里,当我向下拖动任何一个框时,它会滚动很长时间并移出其他框。 但是当我向上拖动任何方框时,它都能正常工作。

那么,有什么方法可以防止它长时间向下滚动?

2 个答案:

答案 0 :(得分:6)

像这样更改样式表:

.scroll {
    border: 1px solid red;
    height: 200px;
    overflow: auto;
    position: static;
    width: 150px;
}

并使用此代码位于ul

的上方
<div style="overflow:hidden;width:150px;height:200px;position:relative">

答案 1 :(得分:1)

这没什么用,但是如果你查看jQuery UI documentation,你会发现问题也出现了。 我认为这是一个错误。