Tutorials Point

  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

Drag 'n' Drop with handle Option

previous next AddThis Social Bookmark Button



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 list bullet perhaps. Frequently this might be an element contained with a larger element - a small image embedded in a draggable <div>, for example - or it could be an entirely separate element.


Here is simple syntax to use 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.


<title>Draggables Elements</title>
<script type="text/javascript" 
<script type="text/javascript"

<script type="text/javascript">

window.onload = function() {
     new Draggable('myimage1', {handle: 'myimage2'});


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


To understand it in better way you can Try it yourself.

previous next Printer Friendly