Jquery HTML将一个div拖动到另一个div中_Jquery_Html_Css

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

jquery html css

Jquery HTML将一个div拖动到另一个div中,jquery,html,css,Jquery,Html,Css,我试图创建一个div（绿色div），它可以在另一个div（带边框的小div）的边界内拖动。这就是我到现在为止一直在尝试的我将试着用数字来解释 I want this 绿色div应该可以拖动，但限制应该是所有四个角上的小div（在小div中不应该看到空白），如上图所示。您需要使用.draggable的包含属性，下面是如何操作的示例 $(function() { $("#draggable").draggable({ containment: [-100,-10

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

我将试着用数字来解释

I want this

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

您需要使用

.draggable

的

包含属性，下面是如何操作的示例
$(function() {
    $("#draggable").draggable({ 
        containment: [-100,-100,0,0]
    });
});

查找容器中使用的参数
，它是偏移量
或位置
（我忘了是哪一个）相对于相对位置
，可以拖动.draggable
的区域，例如使用此HTML

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

因为.bigDiv
相对于其相对位置的偏移量为top:0和左：0，您需要将包含到该[1st_参数，2nd_参数，3rd_参数，4th_参数]，其中

1st_参数
是距离相对位置最左侧的偏移量，因此
因为容器宽度
为200px
，而.draggable为
300px
，您需要将其计算为容器宽度
+容器
左偏移量
-。可拖动宽度
（200+0-300=-100）

2nd param
是相对于相对位置的最上方的偏移量，因此
因为容器高度
为200px
，而.draggable为
300px
，您需要将其计算到容器高度
+容器高度
偏置顶部
-。可拖动高度
（200+0-300=-100）

3rd param
是相对于相对位置的左下方偏移量
（只需将容器宽度
和之间的差值添加到1st_param
）

4th参数
是相对于相对位置的最低顶部偏移量
（只需将集装箱高度
和之间的差值添加到2th参数
）


这是答案，如果你有点困惑
这是完整的代码，只需编辑位置
，宽度
，以及高度
，从.bigDiv
和.smallDiv
上取下就可以了。

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

$（文档）.ready（函数（）{
//如果单击div1，则执行此代码
$（“#div1”）.mousedown（函数（）{
$（窗口）.mousemove（函数（事件）{
var a=event.pageX；//获取x的位置
var b=event.pageY；//获取y的位置
$（“#div1”）.css（“left”，a）；//更改div1左侧的位置并将其等于a
$（“#div1”）.css（“top”，b）；//更改div1顶部的位置并使其等于b
//如果超过容器，则执行此操作
如果（a>450）
{
$（#div1”）.css（“左”，450）；
}
如果（b>260）
{
$（#div1”）.css（“top”，260）；
}
//如果小于容器，则执行此操作
如果（aDo您的意思是要使绿色的div
变小，并在带有黑色边框的div
内拖动？两个div的大小应保持不变，但绿色div不应拖动到带有黑色边框的小div的边框外。这没有任何意义。因为，绿色div
的大小大于ediv
带黑色边框时，绿色的div
总是会溢出。溢出不是问题。在小的div中不应该看到空白。您可以使用包含属性。显示了一个示例。@rishal，您需要稍微调整代码，因为在当前的div中，边框
>容器的边界将不包括在内，因此如果您使用1px
的边界，直到更多，当您将其拖动到最左上角时，您将看到很大的空间，尝试将边界设置为10px以查看我的意思是，我已经看到了，我只是想要逻辑，现在我正在创建我的计算，谢谢堆。首先我感到困惑你的公式是200+0-300，应该是-100，但你写了100。
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;*/
}

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