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

Question

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

3

我正在尝试创建一个可拖动的div（绿色div），但该div的移动范围应限制在另一个div（带边框的小div）的边界内。目前为止，这是我尝试过的内容。点击此处我将尝试通过图示来解释。

I want this

enter image description here

But not this

enter image description here

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

- rishal

溢出不是问题。小div内不应该看到空格。 - rishal

好的，现在我明白了。你想要在绿色 div 进入带有黑色边框的 div 时立即捕捉它，对吗？ - Weafs.py

你想使用.draggable，它是jQuery UI的一部分。 - misterManSam

@chipChocolate.py 是的 - rishal

3

你可以使用containment属性。这个链接展示了一个例子。 - misterManSam

显示剩余5条评论

2个回答

0

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

- CodeSlayer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyojimaru · Accepted Answer

你需要使用 .draggable 的 containment 属性，这里是如何使用的示例：

$(function() {
    $("#draggable").draggable({ 
        containment: [-100,-100,0,0]
    });
});

查找在containment中使用的参数，它是offset或position（我忘记哪个）从它们的相对位置的区域，.draggable将能够被拖动，例如使用此HTML：

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

以及 CSS

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;*/
}

由于

相对位置的偏移量是top:0;和left:0;，因此您需要将containment设置为[1st_param, 2nd_param, 3rd_param, 4th_param]，其中：

1st_param是相对位置最左侧的offset，因此由于容器宽度为200px，.draggable为300px，所以您需要将其计算为container width + container offset left - .draggable width (200 + 0 - 300 = -100)
2nd_param是相对位置最上方的offset，因此由于容器高度为200px，.draggable为300px，所以您需要将其计算为container height + container offset top - .draggable height (200 + 0 - 300 = -100)
3rd_param是相对位置最低左侧的offset（只需将container width与.draggable width之间的差异添加到1st_param中）
4th_param是相对位置最低上方的offset（只需将container height与.draggable height之间的差异添加到2nd_param中）

这里有一个Fiddle演示，或者如果您有点困惑，

这里有一个完整的编码版本Demo，只需编辑.bigDiv和.smallDiv的position、width和height即可查看其效果。