JQuery JavaScript Tutorial


            



  jQuery UI Draggable - Handles
  
  
  
  
  
  
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable p { cursor: move; }
  
  
  $(function() {
    $("#draggable").draggable({ handle: 'p' });
    $("#draggable2").draggable({ cancel: "p.ui-widget-header" });
    $("div, p").disableSelection();
  });
  



  

  I can be dragged only by this handle



  You can drag me around…

  …but you can't drag me by this handle.



Allow dragging only when the cursor is over a specific part of the draggable.  Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.