不要拖过窗口边缘

Question

我有两个重叠的 div。 .second 超过 .first。 每个窗口的宽度和高度都占据了整个窗口。

.second 的属性为 position: absolute; left: -800px; 这样您就可以单击它的一部分将其拖到 .first 上

我希望拖动功能可以防止 .second 超出框架的右边缘和/或超出左侧 -800 像素。

Answer 1

这里是一个示例，如何使用可拖动数组的 jquery ui 的包含选项。该数组有 4 个数字，其中前 2 个数字定义边界框的左上角，后 2 个数字定义边界框的右下角。

所以在下面的示例中，元素左侧的最小 css 为 0px，左侧的最大 css 为 400px。最小css top为10px，最大css top为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>