Drag & Drop with handle Option

Description

This option is used to specify an element to be used as the handle to start the drag operation. By default, an element is its own handle.

Most often, draggable items serve as their own handle, but there may be times when you might want an alternate element to initiate a drag, a caption, or a list bullet perhaps. Frequently this might be an element contained with a larger element, for example, a small image embedded in a draggable <div>, or it could be an entirely separate element.

Syntax

Here is the simple syntax to use the constraint option.

new Draggable('element', {handle: 'dragHandle'});

Here dragHandle is the ID of the desired handle element. Note that when a drag operation takes place, it is still the element that was specified as draggable that is moved, not the handle element.

Example

Live Demo

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Draggable('myimage1', {handle: 'myimage2'});
         }
      </script>
   </head>
   
   <body>
      <p>Try to drag WML logo image and see the result. It 
         will cause movement of green image. </p>

      <img id = "myimage1" src = "/images/scriptaculous.gif"/>
      <br />
      <img id = "myimage2" src = "/images/wml_logo.gif"/>
   </body>
</html>

This will produce following result −

scriptaculous_drag_drop.htm