0

i have a draggable image but i cant to set the boundaries for the image to 1728 by 972.

</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>
$(function() {
    $("#upperMall").draggable();
});

</script>

<body>

<div id="upperMall"><img alt="" height="972" src="images/UpperMall.png" width="1728"></div>
</body>
Henk Jansen
  • 1,142
  • 8
  • 27
Ross
  • 303
  • 1
  • 4
  • 19
  • what are you trying to achieve? What do you mean with boundaries for the image? – Irvin Dominin Nov 27 '13 at 09:46
  • @Irvin well if i drag the image to the right or down. it expands the webpage and adds scroll bars. im trying to get it to be draggable within a set space on the webpage. – Ross Nov 27 '13 at 09:48
  • The image is bigger than the container div? You want to move the image inside the div? – Irvin Dominin Nov 27 '13 at 09:51
  • @Irvin i think so. so there is a fix "box" that the image is draggable. it just to stop the webpage expanding to the right and own when you drag the image that direction. – Ross Nov 27 '13 at 09:56

1 Answers1

2

Edit This in Script

$("#upperMall").draggable({ containment: "#container", scroll: false });

Add A container Div outside upperMall div

<div id="container">
    <div id="upperMall">
       .
       .
       .
     </div>

</div>

Make the container div bigger than the upperMall div

CSS

body{overflow-x:hidden}

Try This..

Soumik Sur
  • 167
  • 8
  • thats stops the image from being draggable – Ross Nov 27 '13 at 09:54
  • i know.. i have edited my answer.. u just need to add a div outside upperMall Div.. N make sure the upperMall div is lesser in Dimension Than the Container Div... – Soumik Sur Nov 27 '13 at 09:58
  • it work to an extent. sorry i wasnt clear. i want it to be bounded by the container div but still able to be drag passed it. so if i drag the image right, it wont expand the webpage but i will be able to drag it all the way right. and if i drag it right the parts that have gone past the boundary are not visible – Ross Nov 27 '13 at 10:12
  • u can try to add css and make the body overflow-x:hidden. like this.. body{overflow-x:hidden} it wont let the webpage to expand horizontally – Soumik Sur Nov 27 '13 at 10:22