Javascript 设置可拖动对象的边界限制

我有两个要素：

1.固定高度的父级，

溢出：隐藏

2.它的子代，具有较大的固定高度

<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>

.myList{列表样式：无；边距：0px；填充：1px；}
.myList li{高度：50px；边距：4px；填充：2px；}
.dragPanel{高度：230px；边框：实心；溢出：隐藏；}

一,
二,
...   ....
八,
九,

我希望能够在父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>

$（文档）.ready（函数（）{
$（'.dragPanel'）.addClass（“悬停”）；
$（'.myList'）.draggable（{axis:'y'}）；
});

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

使用：

嗯

这是我走过的路线

加载页面时，我在可拖动列表周围添加一个container div。我将其高度设置为列表的两倍，然后将其在页面上稍微向上定位：

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

    function CreateContainerDiv() {
        var dragPanel = $('.dragPanel');
        var dragTarget = $('.myList');

        // add the container panel
        var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight();
        dragTarget.wrap(document.createElement("div"));

        // set its height and put it in the right place
        dragTarget.parent().css("height", newPanelHeight);
        dragTarget.parent().css("position", "relative");
        var newPanelPosition = ((dragTarget.outerHeight() * -1) / 2);
        dragTarget.parent().css("top", newPanelPosition);         
    }
</script>

$（文档）.ready（函数（）{
CreateContainerDiv（）；
$（'.dragPanel'）.addClass（“悬停”）；
$（'.myList'）.draggable（{axis:'y'，containment:'parent'}）；
});
函数CreateContainerDiv（）{
var dragPanel=$（'.dragPanel'）；
var dragTarget=$（'.myList'）；
//添加容器面板
var newPanelHeight=dragTarget.outerHeight（）*2-dragPanel.outerHeight（）；
dragTarget.wrap（document.createElement（“div”））；
//设置其高度并将其放置在正确的位置
dragTarget.parent（）.css（“高度”，newPanelHeight）；
dragTarget.parent（）.css（“位置”、“相对”）；
var newPanelPosition=（（dragTarget.outerHeight（）*-1）/2）；
dragTarget.parent（）.css（“top”，newPanelPosition）；
}

然后，列表将包含在此新元素中

这似乎可以做到这一点，但如果列表中应用了任何填充/边距，那么位置就会有点不确定。如果您对此有任何想法，我们将不胜感激

------编辑---------

好的，我想我已经解决了安置问题。我已经把它变成了一个插件，这样其他人就不用花时间创建这个功能了

---

我也有同样的问题，答案对我没有帮助。我认为下面是一个更好的解决方案

（有人知道如何将其转换为jQuery插件吗？）

拖拽限制在集装箱内
#容器{
光标：移动；
溢出：隐藏；
宽度：300px；
高度：300px；
边框：1px纯黑；
}
$（函数（）{
$.globalVars={
原点：0，
原始高度：0，
maxHeight:$（“#可拖动”）.height（）-$（“#容器”）.height（），
maxWidth:$（“#可拖动”）.width（）-$（“#容器”）.width（）
};
$（“#可拖动”）。可拖动({
开始：功能（事件、用户界面）{
if（ui.position！=未定义）{
$.globalVars.originalTop=ui.position.top；
$.globalVars.originalLeft=ui.position.left；
}
},
拖动：函数（事件、ui）{
var newTop=ui.position.top；
var newLeft=ui.position.left；
if（ui.position.top<0&&ui.position.top*-1>$.globalVars.maxHeight）{
newTop=$.globalVars.maxHeight*-1；
}
如果（ui.position.top>0）{
newTop=0；
}
if（ui.position.left<0&&ui.position.left*-1>$.globalVars.maxWidth）{
newLeft=$.globalVars.maxWidth*-1；
}
如果（ui.position.left>0）{
newLeft=0；
}
ui.position.top=newTop；
ui.position.left=newLeft；
}
});
});

这种结构不需要拖动任何东西。您需要的是使用overflow-x:hidden设置父div；和overflow-y:scroll；。这样，它的内容就可以滚动了

---

如果要隐藏滚动条，只需放置以下属性：.dragPanel:：-webkit滚动条{width:0！important}，就是这样！我真的不知道你为什么想拖动元素而不是仅仅滚动内容（这是解决此类“问题”的正确方法）。无论如何，我希望它能帮助任何需要满足同样需求的人。你好

父对象的高度比子对象的小-当我尝试此选项时，拖动不起作用-列表只是在顶部和底部位置之间跳跃-这太棒了。easyvery非常好的方法，添加另一个具有其他大小的滚动窗格非常好。非常好的Paul。。

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

    function CreateContainerDiv() {
        var dragPanel = $('.dragPanel');
        var dragTarget = $('.myList');

        // add the container panel
        var newPanelHeight = dragTarget.outerHeight() * 2 - dragPanel.outerHeight();
        dragTarget.wrap(document.createElement("div"));

        // set its height and put it in the right place
        dragTarget.parent().css("height", newPanelHeight);
        dragTarget.parent().css("position", "relative");
        var newPanelPosition = ((dragTarget.outerHeight() * -1) / 2);
        dragTarget.parent().css("top", newPanelPosition);         
    }
</script>

<!DOCTYPE html>
<html>
<head>
    <title>Draggable limited to the container</title>
    <style type="text/css">
    #container {
        cursor: move;
        overflow: hidden;
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }
    </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() {
        $.globalVars = {
            originalTop: 0,
            originalLeft: 0,
            maxHeight: $("#draggable").height() - $("#container").height(),
            maxWidth: $("#draggable").width() - $("#container").width()
        };
        $("#draggable").draggable({
            start: function(event, ui) {
                if (ui.position != undefined) {
                    $.globalVars.originalTop = ui.position.top;
                    $.globalVars.originalLeft = ui.position.left;
                }
            },
            drag: function(event, ui) {
                var newTop = ui.position.top;
                var newLeft = ui.position.left;
                if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) {
                    newTop = $.globalVars.maxHeight * -1;
                }
                if (ui.position.top > 0) {
                    newTop = 0;
                }
                if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) {
                    newLeft = $.globalVars.maxWidth * -1;
                }
                if (ui.position.left > 0) {
                    newLeft = 0;
                }
                ui.position.top = newTop;
                ui.position.left = newLeft;
            }
        });
    });
    </script>
</head>
<body>
    <div id="container">
        <img id="draggable" src="avatar.jpg" />
    </div>
</body>
</html>