Web | This Site

Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Drag 'n' 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 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.

## Syntax:

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.

## Example:

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

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

Advertisement

Online Image Processing

Indian Baby Names