javascript - 为可拖动对象设置边界限制

Question

我有两个元素:

1. 固定高度的父级，overflow:hidden

2. 它的 child ，具有更大的固定高度。

<style type="text/css">
    .myList {list-style:none; margin:0px; padding:1px;}
    .myList li{ height:50px;  margin:4px; padding:2px;}
    .dragPanel {height:230px; border:solid; overflow:hidden;}
</style>

<div class="dragPanel">
    <ul class="myList">
        <li>1</li>
        <li>2</li>
        ...   ....
        <li>8</li>
        <li>9</li>
    </ul>
</div>

我希望能够在父 div 中上下拖动列表。我正在使用 jquery ui draggable 插件来实现垂直拖动，但我不确定如何将列表限制在父 div 中。

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.dragPanel').addClass("hover");
        $('.myList').draggable({ axis: 'y' });
    });
</script>

我将如何为列表的位置设置垂直上限和下限？

Answer 1

使用 containment option :

$('.myList').draggable({
    axis: 'y',
    containment: 'parent'
});