Не перетаскивайте края окон

Question

У меня есть два divs, перекрывающих каждый. . Вторая секунда. Каждый принимает полное окно как по ширине, так и по высоте.

.second обладает свойством position: absolute; left: -800px; , так что вы можете нажать часть его, чтобы перетащить его на .Первый

я хотел функцию перетаскивания, чтобы предотвратить .second выйти за пределы правого края кадр и/или идти дальше, чем -800px влево.

Answer 1

Вот пример использования опции сдерживания jquery ui draggable с массивом. Массив принимает 4 номера, где первые 2 числа определяют левый верхний угол ограничивающего прямоугольника, а последние 2 числа определяют правый нижний угол ограничивающего прямоугольника.

В приведенном ниже примере minmum css слева от элемента 0px, а максимальное значение css - 400px. Минимальная вершина css равна 10px, а максимальная вершина css - 200px.

В основном вам просто нужно настроить значения в массиве в соответствии с вашими потребностями.

var index1 = 10; 
 

 
$('#test').draggable({ 
 
    containment: [0, index1, $('body').width()/4, 200] 
 
}); 
 

 
// update option containment after a window resize 
 
$(window).resize(function() { 
 
    $("#test").draggable("option", "containment", "parent"); 
 
});

body{ 
 
height: 350px; 
 
} 
 

 
#test{ 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 2px solid #000; 
 
    background: gray; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="test"></div>