jquery - Draggable image when image is larger than the container

Question

Making an image draggable does some pretty wacky things when the image is larger than the container... Does anyone know a way around this?

Here's my code...

<script type='text/javascript' src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("img").draggable({ containment: "div", scroll: false });

    });

</script>

<style type="text/css">
    div {
        width:500px; 
        height:423px; 
        position:relative; 
        overflow:hidden;
    }
</style>

and...

<div>
    <img src="images/map.jpg" width="1000" height="845" alt="Map" />
</div>

Answer 1

I'm not sure that you're using draggable properly. The point of it is to pick up the image and put it somewhere. If the image is larger than the container, how can you know where you're putting it? It's not the same as if you want to grab the image and make the container scroll as you drag.

Now, that said, I think it's a bug (or maybe a feature?) that makes the outer edges snap to the container edges if the inner element is larger.

Are you trying to scroll the map while the mouse is clicked and dragged?

Answer 2

It is working if you set the the bounds manually:

$("img").draggable({ containment: [0, 0, 500, 423], scroll: false });