如何限制1个div与另一个div之间的距离不超过一定长度？
如何限制1个div与另一个div之间的距离不超过一定长度？
提问于 2014-11-23 22:59:52
我有这个
<div class="holder">
<div class="drag">
</div>
</div>我的jqueryui
$(".drag").draggable();所以现在我可以拖动.drag分区了，我该如何编写代码来限制拖动分区不超过30px的距离呢？因此，如果拖动div距离持有者div为30px，则拖动将不起作用，或者基本上拖动div将在距离持有者div达到最大30px后停止“拖动”？谢谢
回答 3
Stack Overflow用户
发布于 2014-11-23 23:25:53
试试这个：
var distance;
$(".drag").draggable({
drag: function(event, ui){
distance = // calculate distance between divs here
if(distance > 30) return false;
}
});请参阅jQueryui.com上的
请参阅。在这种情况下，蓝色的div只能在父级的30px范围内移动。
Stack Overflow用户
发布于 2014-11-23 23:39:46
jsFiddle => http://jsfiddle.net/u9f465h0/4/
var holderPos = {};
holderPos.width = $('.holder').outerWidth(true);
holderPos.height = $('.holder').outerHeight(true);
$('.drag').draggable({
start: function() {
$('.drag').draggable({revert:false});
},
drag: function(event, ui) {
if(ui.position.left<-30) {
$('.drag').draggable({revert:true});
return false;
}
else if(ui.position.top<-30) {
$('.drag').draggable({revert:true});
return false;
}
else if(ui.position.top>(10+holderPos.height)) {
$('.drag').draggable({revert:true});
return false;
}
else if(ui.position.left>(10+holderPos.width)) {
$('.drag').draggable({revert:true});
return false;
}
}
});对于上面的代码，您可以更改还原速度：
$( ".selector" ).draggable({ revertDuration: 200 });对于上述div代码中的keep draggable object，您只能使用以下代码：
$(".drag").draggable ({ containment : ".holder" }); //for hold drag in div.holderStack Overflow用户
发布于 2014-11-24 22:35:13
我能想到的最简单的方法是将draggable包装在一个绝对定位的元素中(这样它就不会正常流动，不会影响布局的其余部分)，该元素大于.holder×n像素(您可以通过将它的top，right，bottom，left属性设置为-n来实现)，并将它设置为draggable的containment。
$('.drag').draggable({
containment: ".containment"
});.holder {
position: relative;
top: 100px; /*only for demo prpose*/
width: 200px;
height: 200px;
margin: 0px auto;
background: red;
}
.containment {
position: absolute;
top: -30px;
right: -30px;
bottom: -30px;
left: -30px;
outline: 1px solid dodgerblue; /*only for demo prpose*/
}
.drag {
width: 20px;
height: 40px;
background: blue;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="holder">
<div class="containment">
<div class="drag"></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27090291
复制相关文章
相似问题
腾讯云开发者
