Jquery - image with drag and drop when image is larger than container

Question

Creating a dragged image does some pretty crazy things when the image is bigger than the container ... Does anyone know about this?

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

It works if you set the borders manually:

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

Answer 2

I'm not sure if you are using draggable correctly. The point is to pick up the image and place it somewhere. If the image is larger than the container, how can you find out where you put it? This is not the same as if you want to capture an image and scroll the container while dragging.

Now, I think this is a bug (or maybe a function?) That forces the outer edges to snap to the edges of the container if the inner element is larger.

Are you trying to scroll the map when you click and drag?

Answer 3

I decided to set the dynamic containment based on the parent and child size by doing the following: JSFiddle Here :

 $(function () { $("div[id='dragx']").draggable({ drag : function(event,ui){ var parent = ui.helper[0].parentNode; var dragWidth = ui.helper[0].clientWidth; var parentWidth = parent.clientWidth; var dragHeight = ui.helper[0].clientHeight; var parentHeight = parent.clientHeight; var widthDifference = dragWidth - parentWidth; var heightDifference = dragHeight - parentHeight; if(ui.position.left > 0) ui.position.left = 0; else if(ui.position.left < -widthDifference) ui.position.left = -widthDifference; if(ui.position.top > 0) ui.position.top = 0; else if(ui.position.top < -heightDifference) ui.position.top = -heightDifference; } }); });