Question

我有两个div重叠。第二个是.first。每个都在宽度和高度上占据整个窗口。

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

上

我希望使用拖动功能来防止.second超出框架的右边缘和/或超过-800px。

Answer 1

这是一个如何使用jquery ui draggable的包含选项和数组的示例。该数组采用4个数字，其中前2个数字定义了边界框的左上角，最后2个数字定义了边界框的右下角。

因此，在下面的示例中，元素左边的minmum css是0px，剩下的最大css是400px。最小css顶部为10px，最大css顶部为200px。

基本上你只需要根据需要调整数组中的值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

不要拖过窗口边缘

1 个答案: