Question

我正在尝试创建一个div（绿色div），它可以被拖动但在另一个div（带边框的小div）的边界内。这是我到现在为止所尝试过的。

我将尝试在图中解释

I want this

enter image description here

But not this

enter image description here

绿色div应该可以拖动但是限制应该是所有四个角中的小div（在小div中不应该看到白色空间），如上图所示。

Answer 1

您需要使用containment的{{1}}属性，这里有关于如何操作的示例

.draggable

查找$(function() { $("#draggable").draggable({ containment: [-100,-100,0,0] }); });中使用的parameter，它是containment或offset（我忘了哪一个）可以拖动position的{{1}}区域，例如relative position

.draggable

和HTML

<div class="bigDiv">
    <div class="smallDiv" id="draggable">
    </div>
</div>

因为来自CSS的{{1}}的{{1}}是body { margin: 0; padding: 0; } .bigDiv{ border: solid 1px black; position: absolute; top: 0; left: 0; height: 200px; width: 200px; /*overflow: hidden;*/ } .smallDiv{ opacity: 0.5; background-color: limegreen; position: absolute; width: 300px; height: 300px; /*overflow: hidden;*/ }和offset，您需要制作.bigDiv到[1st_param，2nd_param，3rd_param，4th_param]，其中

relative position是top: 0;中最左侧的left: 0;，所以因为containment是1st_param而offset是relative position container width，您需要将其计算为200px + .draggable - 300px（200 + 0 - 300 = -100）
container width是container offset left中最顶级的.draggable width，所以因为2nd param是offset而relative position是container height 200px，您需要将其计算为.draggable + 300px - container height（200 + 0 - 300 = -100）
container offset top是.draggable height中最左边的3rd param（只需将offset和relative position之间的差异添加到container width）
.draggable width是1st_param中最低的4th param（仅添加offset和relative position与container height之间的差异）

这里是Demo in Fiddle，或者如果你有点困惑，

这里是完整编码的Demo，只需编辑.draggable height，2nd_param和position width和{{1}在行动中检查它。

Answer 2

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

//if the div1 is clicked performed this code
$("#div1").mousedown(function(){

$(window).mousemove(function(event) {

 var a=event.pageX;//get the position of x
 var b= event.pageY;//get the position of y
 $("#div1").css("left",a);//change the position-left of div1 and equal it to a
 $("#div1").css("top",b);//change the position-top of div1 and equal it to b

  //if more than the container do this
   if(a>450)
   {
      $("#div1").css("left",450);
   }
   if(b>260)
   {
      $("#div1").css("top",260);
   }
   //if less than the container do this
   if(a<0)
   {
      $("#div1").css("left",0);
   }

   if(b<0)
   {
      $("#div1").css("top",0);
   }
 });

});

});
</script>
</head>
<body>

<div id="div2" style="background-color:green;width:500px;height:300px; position:absolute;">

<div id="div1" style="background-color:red;width:50px;height:40px; position:absolute;"></div>
</div>

</body>
</html>

HTML在另一个div中拖动一个div

2 个答案: