Как ограничить 1 div, чтобы не идти дальше определенной длины от другого div?

Question

У меня есть этот

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

    </div> 
</div> 

мою jqueryui

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

Так что теперь я могу перетащить .drag DIV, как я могу закодировать ограничить сопротивления DIV не выходить за рамки 30px расстоянии от держателя? Так что, если drag div находится на расстоянии 30px от держателя div, сопротивление не будет иметь эффекта, или в основном div div перестанет «перетаскиваться» после того, как он достигнет максимума в 30px от держателя div? Благодаря

Answer 1

Попробуйте это:

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

См the events page на jQueryui.com

См THIS FIDDLE. В этом случае синий div можно перемещать только в диапазоне 30px от родителя.

Answer 2

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

Для держать перемещаемой объект в сНу выше код можно использовать только этот код за пределы:

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

Answer 3

Самый простой способ, который я могу придумать, - обернуть перетаскиваемый в абсолют Ely расположен элемент (Так что из нормального потока и не влияет на остальную часть макета), который больше, чем .holder по n пикселей (можно достичь, установив его top, right, bottom, left свойства -n) и установите его как 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>