ansaurus

Question

jquery draggable

Answer 1

A:

The following works perfectly for me (You'll have to modify the containment plots to match your draggable element dimensions though):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
  <head>
    <title>jQuery</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;

     <script type='text/javascript'>

       $(document).ready(function(){
      $("#draggable").draggable({
        containment: [-150,-150,0,0],
        scroll: 'false'
      });
       });

     </script>
     <style type="text/css">
       #container {
      width:200px;
      height:200px;
      border:1px solid #cccccc;
      overflow:hidden;
       }
       #draggable {
      width:359px;
      height:359px;
      background:#cc0000 url("http://www.sudoku.4thewww.com/Grids/grid.jpg");
       }
     </style>
      </head>
    <body>

      <div id="container">
     <div id="draggable"></div>
      </div>

    </body>
</html>

Jonathan Sampson 2009-06-24 01:17:31

that does work. but the main point has not been included. i mentioned that i have the overflow:hidden CSS property set for the image to be dragged. the image is larger than the container.

amit 2009-06-24 09:50:00

amit - I've updated the code to include an image larger than the container, and used overflow:hidden on the container. The main difference is the containment value - you use a series of plots this time, [x1,y1,x2,y2].

Jonathan Sampson 2009-06-24 10:27:56

works like a charm. but the right and bottom areas are still exposed. i mean to say the image continues to drag left and top to display the background on the right and bottom area of the div.

amit 2009-06-24 11:32:25

You need to modify the plots provided. Mine were for a different-sized image.

Jonathan Sampson 2009-06-24 11:33:08

what if i have different images of different sizes? how do i cope with that?

amit 2009-06-24 17:25:17

You can likely work up a small equation using $(".selector").width() and $(".selector").height() to automatically determine those plots.

Jonathan Sampson 2009-06-24 17:43:06

But then you need to redo that if the user does something like resize his browser window; the ideal solution would just to have the jQuery draggable obey the conainment parameter, even if its own contiainer if larger than that of the containment element.

El Yobo 2010-04-12 09:47:34

Further to my last comment - if you set the container to scroll:auto and position:relative, then the draggable will cause the container to scroll when it hits the edge. This might also be useful (it was exactly what I was after anyway).

El Yobo 2010-04-12 09:58:44

Answer 2

A:

for me is quite a perfect solution, but it doesn't work when I set "margin: auto" to the container

massimo 2009-09-24 10:32:57

Answer 3

A:

I recently ran into this same problem. I extracted my code into a plugin which I think does exactly what you're after...

details here:

http://webpangea.blogspot.com/2009/10/draggable-scrolling-list-with-jquery.html

Paul 2009-10-13 10:01:16

Answer 4

A:

I set this up on my website and it works great in all browsers except ie 7 - Any solutions? Anyone?

Lee 2010-01-13 18:43:39

ansaurus

tags:

views:

answers:

jquery draggable

related questions