Javascript 如何限制一个div与另一个div的距离不超过某个长度？

我有这个

<div class="holder">
    <div class="drag">

    </div>
</div>

现在我可以拖动.drag div了，我该如何编码来限制drag div与支架的距离不超过30px？因此，如果drag div距离保持架div为30px，则阻力将无效，或者基本上drag div在距离保持架div达到最大30px后将停止“拖动”？谢谢

试试这个：

var distance;
$(".drag").draggable({
    drag: function(event, ui){
        distance = // calculate distance between divs here
        if(distance > 30) return false;
    }
});

请参阅jQueryui.com上的

请参阅。在这种情况下，蓝色div只能在距离父级

30px

的范围内移动。

jsFiddle=>

对于上面div代码中的keep draggable对象，您只能使用以下代码以外的代码：

$(".drag").draggable ({ containment : ".holder" });  //for hold drag in div.holder

---

我能想到的最简单的方法是将可拖动对象包装在一个绝对定位的元素中（这样它就脱离了正常流程，不会影响布局的其余部分），该元素大于

.holder

的

n

像素（您可以通过将其

顶部

，

右侧

，

底部

，

左侧

属性设置为

-n

）并将其设置为可拖动的属性来实现

$（'.drag'）。可拖动({
遏制：“.遏制”
})；

.holder{
位置：相对位置；
顶部：100px；/*仅用于演示姿势*/
宽度：200px；
高度：200px；
保证金：0px自动；
背景：红色；
}
.遏制{
位置：绝对位置；
顶部：-30px；
右：-30px；
底部：-30px；
左：-30px；
轮廓：1px固体道奇蓝；/*仅用于演示姿势*/
}
.拖{
宽度：20px；
高度：40px；
背景：蓝色；
}

我如何计算div之间的距离？是的，很抱歉我昨天在pc上遇到了一些问题。我刚起床，完成代码并开始工作。我编辑了一些代码，工作正常。你知道我如何重置我的div的位置吗？拖回初始位置？完成。我用revert更新了代码。我将尝试在将来将代码的一半剪切为mo如果你想发回对象，请使用$（“.selector”）.draggable（{revert:true}）；想知道这些答案是否有用。。。

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 });

$(".drag").draggable ({ containment : ".holder" });  //for hold drag in div.holder