Question

我有这个

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

    </div>
</div>

我的jqueryui

$(".drag").draggable();

所以现在我可以拖动.drag div，我如何编码来限制拖拽div不超过距离持有者30px的距离？因此，如果拖动div距离持有者div是30px，那么拖动将没有任何效果，或者基本上拖动div将在距离持有者div达到最大30px之后停止“拖动”？感谢

Answer 1

试试这个：

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

请参阅jQueryui.com上的 the events page

请参阅 THIS FIDDLE 。在此，蓝色div只能在父级的30px范围内移动。

Answer 2

jsFiddle =＆gt; 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代码中保留可拖动对象，您只能使用以下代码：

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

Answer 3

我能想到的最简单的方法是将draggable包装在一个绝对定位的元素中（使它超出正常流程并且不会影响其余的布局）大于.holder n像素（您可以通过设置top，right，bottom，left属性来实现到-n）并将其设置为可拖动的containment。

＆＃13;

$('.drag').draggable({
  containment: ".containment"
});

＆＃13;

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

＆＃13;

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

＆＃13;

如何限制1 div除了远离另一个div一定长度？

3 个答案: