jquery draggable

Question

i have a div i want to drag confined in a particular container. i tried using the containment: parent option but this results in the div getting snapped to upper or lower bounds without dragging. i have overflow:hidden set, i hope that is not a problem. (i read it somewhere)

pls help me out.

the code:

imgCanvas.appendChild(img); 
overlay.appendChild(imgContainer);

$(document).ready(function() { 
  $("#draggable").draggable({
    containment: '#imgContainer', 
    scroll: false
  });                                                       
});

the #draggable is a div that contains the img, and #draggable is appended to imgContainer. i hope this helps somehow.

Show us some code and help will come running like a bat out of hell. — karim79
– karim79, Commented Jun 23, 2009 at 22:29

Sampson · Accepted Answer · 2009-06-24 12:24:22Z

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">
<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"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

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

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 - 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].
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.
You need to modify the plots provided. Mine were for a different-sized image.
what if i have different images of different sizes? how do i cope with that?

Paul · Accepted Answer · 2009-10-13 10:01:16Z

0

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

answered Oct 13, 2009 at 10:01

Paul

5,5762 gold badges32 silver badges38 bronze badges

Collectives™ on Stack Overflow

jquery draggable

2 Answers 2

9 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Related