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

我有两个要素：

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

它的孩子，固定高度较大。

  .myList {list-style:none; margin:0px; padding:1px;} .myList li{ height:50px; margin:4px; padding:2px;} .dragPanel {height:230px; border:solid; overflow:hidden;}  
 
 
1
 
2
 ... .... 
8
 
9
 
  

我希望能够在父div中上下拖动列表。 我使用jquery ui draggable插件来实现Verticle拖动，但我不确定如何约束父div中的列表。

     $(document).ready(function() { $('.dragPanel').addClass("hover"); $('.myList').draggable({ axis: 'y' }); });  

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

Answer 1

使用包含选项 ：

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

Answer 2

我有同样的问题，答案对我没有帮助。 一些javascript后来我认为以下是一个更好的解决方案。

（有人知道如何把它变成一个jQuery插件吗？）

Answer 3

好，

这是我走下去的路线……

加载页面时，我在可拖动列表周围添加一个容器div。 我把它的高度设置为列表的两倍，然后将它放在页面上一点点：

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

这似乎可以完成这项工作，但如果列表中应用了任何填充/边距，则定位会有点不对劲。 对此的任何想法都会被贬低！

——编辑———

好的，我想我已经解决了安置问题。 我把它变成了一个插件，所以其他人不必花时间创建这个function。

Github上的jQuery Drag-gable列表

Answer 4

您不必为这种结构拖动任何东西。 你需要的是设置父div与overflow-x：hidden; 和overflow-y：scroll;。 这样，它的内容将是可滚动的。

如果你想隐藏滚动条，只需输入以下属性：.dragPanel :: – webkit-scrollbar {width：0！important}就是这样！ 我真的不知道你为什么要考虑拖动元素而不只是滚动内容（这是执行这种“问题”的正确方法）。 无论如何，我希望它可以帮助任何需要适合同样需要的人。 问候！