Clever Geek Handbook

HTML Drag a div inside another div

I'm trying to create a div (green div) that can be dragged but inside the borders of another div (small div with a border). This is what I have tried so far.

Press here

I will try to explain in the picture

I want this

enter image description here

But not this

enter image description here

The green div should be able to move, but the limit should be the small div (no space should be visible in the small div) in all four corners as shown above.

+3


source to share


2 answers


you need to use the property containment

for .draggable

, here's an example on how to do it

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

find parameter

which one is used in containment

, this offset

or position

(I forgot which) the area from them relative position

where .draggable

can be dragged, for example with thisHTML 

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

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

because offset

of .bigDiv

out of it relative position

is top: 0;

, and left: 0;

you need to do containment

for this [1st_param, 2nd_param, 3rd_param, 4th_param ], where

  • 1st_param

    is the largest offset

    of relative position

    , so because container width

    200px

    , a .draggable

    - 300px

    , you need to calculate it by container width

    + container offset left

    - .draggable width

    (200 + 0 - 300 = -100)
  • 2nd param

    is the top offset

    of relative position

    , so because is container height

    equal to 200px

    , and .draggable

    - 300px

    , you need to calculate it by container height

    + container offset top

    - .draggable height

    (200 + 0 - 300 = -100)
  • 3rd param

    is the lowest on the left offset

    of relative position

    (just add the difference between container width

    and .draggable width

    at 1st_param

    )
  • 4th param

    is the smallest vertex offset

    from relative position

    (just add the difference between container height

    and .draggable height

    at 2nd_param

    )

here's Demo in Fiddle , or if you are a little confused,

here the complete code Demo , simply edit position

, width

and height

using .bigDiv

and .smallDiv

to check it out in action.

+3


source 


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


0


source






More articles:


All Articles