How to restrict the draggable div in this case

Question

I have the following html structure:

HTML

<div id="outer">
    <div id="inner">
      <div id="bounds">
        <div id="myimage">        
        </div>
      </div>
    </div>
  </div>

CSS

#outer
{
  border: solid 1px red;
  padding: 50px 30px 50px 30px;
  float: left; 
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
  overflow:hidden;
  position:relative;
}

#myimage
{
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg');
  background-position : 0,0;
  background-repeat:no-repeat;
  width: 648px;  /*TODO : size will be dynamic*/
  height: 438px; /*TODO : size will be dynamic*/
  position:relative;      
}

JS

$("#myimage").draggable(); //{ containment: "#bounds" }


//$("#bounds").width();  //? value
//$("#bounds").height(); //? value
//$("#bounds").css("left",""); //? value
//$("#bounds").height("top","");? value

Demo with JSBin

A "inner" div which has a draggable child div with background-image.
The inner div has overflow:hidden. What i need is to restrict the drag of the image so that the whole image can be scrolled but the image should never be dragged completely out of the "inner" div (some part of the image must always remain visible).

Thats why i added a bounds div . How can i define the dimensions and position for the bounds div which enables me to restrict the movement of the image.

Such that i can write

$("#myimage").draggable({ containment: "#bounds" });

http://api.jqueryui.com/draggable/#option-containment

Parthik Gosar · Accepted Answer · 2013-05-29T18:30:20.477

1

You need to create a div with

left as -width of your image

top as -height of your image

width as width * 2 + width of view port(300)

height as height * 2 + height of view port(300)

html

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <div id="bounds">        
        </div>
        <div id="myimage">        
          <div>


    </div>
  </div> 
</body>
</html>

css

#outer
{
  border: solid 1px red;
  padding: 50px 30px 50px 30px;
  float: left; 
}

#inner
{
  width: 300px;
  height: 300px;
  border: solid 1px black;
  overflow:hidden;
  position:relative;
}

#myimage
{
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg');
  background-position : 0,0;
  background-repeat:no-repeat;
  width: 648px;
  height: 438px;
  position:relative;

}

javascript

var imgwidth = "648";
var imgheight = "438";
$("#bounds").css({
  position:"absolute",
  left: -imgwidth + 10,
  top:-imgheight + 10,
  width: imgwidth * 2 + 300 - 20,
  height:imgheight * 2 + 300 - 20,
  }
                     );
$("#myimage").draggable({ containment: "#bounds" });

Checkout this bin

http://jsbin.com/atavub/14/

edited May 29 '13 at 18:30

answered May 29 '13 at 17:18

Parthik Gosar

10,998
3
24
16

yes but i want it to be dynamic based on the dimensions of the image. – Amitd May 29 '13 at 17:24
any reason why we need a `containment` div? is it possible to resize the `bounds` div instead – Amitd May 29 '13 at 17:47
did it with bounds now. check the new bin – Parthik Gosar May 29 '13 at 17:54
top and bottom work fine but the img can be dragged out of view to the right and left still..is there a way to add tolerance/margins to all sides? See http://jsbin.com/atavub/15/edit ..i updated the actual image dimensions. were incorrect earlier 842x569 is correct – Amitd May 29 '13 at 18:00
1

i checked your link, the image did not go outside from anyside. The -10 I added in the code is the left margin and top margin. The double of the same should be subtracted from the width and height respectively. – Parthik Gosar May 29 '13 at 18:07
ah now i understand thx a lot :) btw why is the `bounds` div absolute and a sibling to the image.. instead of its parent? – Amitd May 29 '13 at 18:18
1

the bounds div starts from -832 and -559, putting your image inside it would require you to give your image a left of 832 and 559 for it to appear inside the viewport. To avoid that, i made it a sibbling. And since it is a sibbling, without position:absolute, the bounds and the image would appear one below the other and wont overlap each other which is our requirement. – Parthik Gosar May 29 '13 at 18:23
marked as answer.. thx alot .. pls add the jsbin html and js code to the answer above..easier to understand later . – Amitd May 29 '13 at 18:27

How to restrict the draggable div in this case

1 Answers1