Search code examples
jqueryhtmlimagedraggableboundary

jquery how to set limits for a draggable image

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

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