为可拖动对象设置边界限制
Posted
技术标签:
【中文标题】为可拖动对象设置边界限制【英文标题】：Setting boundary limits for a draggable object 【发布时间】：2010-12-05 13:58:04 【问题描述】：我有两个元素：
1. 固定高度的父级，overflow:hidden
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>
我希望能够在父 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>
我将如何设置列表位置的垂直上限和下限？
【问题讨论】：
【参考方案1】：使用containment option：
$('.myList').draggable(
axis: 'y',
containment: 'parent'
);
【讨论】：
父级的高度小于其子级 - 当我尝试此选项时，拖动不起作用 - 列表只是在顶部和底部位置之间跳转 这太棒了。容易【参考方案2】：我遇到了同样的问题，但答案对我没有帮助。后来一些javascript我认为以下是更好的解决方案。
（有人知道如何把它变成一个 jQuery 插件吗？）
<!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>
【讨论】：
【参考方案3】：好的，
这是我走过的路线……
加载页面时，我在可拖动列表周围添加了一个容器 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>
然后列表包含在这个新元素中。
这似乎可以完成这项工作，但如果列表应用了任何填充/边距，则定位有点不稳定。对此有任何想法都将不胜感激！
-----编辑---------
好的，我想我已经解决了展示位置问题。我已经把它变成了一个插件，这样其他人就不必花时间创建这个功能了。
jQuery Drag-gable List at Github
【讨论】：
非常非常好的方法，添加一个其他大小的滚动窗格非常好。优秀的保罗..【参考方案4】：您不必为这种结构拖动任何东西。您需要的是使用overflow-x:hidden 设置父div；和溢出-y：滚动；。这样，它的内容将是可滚动的。
如果你想隐藏滚动条，只需输入这个属性： .dragPanel::-webkit-scrollbarwidth:0 !important 就可以了！我真的不知道您为什么要考虑拖动元素而不仅仅是滚动内容（这是执行此类“问题”的正确方法）。无论如何，我希望它可以帮助任何需要满足相同需求的人。问候！
【讨论】：
以上是关于为可拖动对象设置边界限制的主要内容，如果未能解决你的问题，请参考以下文章
如何在 javascript 中为我的可拖动对象设置“边界”区域？