amit amit - 1 month ago 17
jQuery Question

jquery draggable

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.

Answer

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>