Jquery JavaScript DHTML


            



  jQuery UI Draggable - Constrain movement
  
  
  
  
  
  
  .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable, #draggable2 { margin-bottom:20px; }
  #draggable { cursor: n-resize; }
  #draggable2 { cursor: e-resize; }
  #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px;}
  
  
  $(function() {
    $("#draggable").draggable({ axis: 'y' });
    $("#draggable2").draggable({ axis: 'x' });
    
    $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });
    $("#draggable4").draggable({ containment: '#demo-frame' });
    $("#draggable5").draggable({ containment: 'parent' });
  });
  



Constrain movement along an axis:
  

  I can be dragged only vertically



  I can be dragged only horizontally


Or to within another DOM element:


  I'm contained within the box



  I'm contained within the box's parent



  I'm contained within my parent






Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'