Skip to content
Related Articles

Related Articles

script.aculo.us Drag & Drop handle Option
  • Last Updated : 25 Dec, 2020

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.

The handle option is used to specify the element that would be used as the handle when the drag-gable item is being moved. It can either be a reference to the DOM element or a string defining the handle to be used.

Syntax:

{ handle: value }

Parameters: This option has a single value as mentioned above and described below:

  • value: This is a reference to a DOM element or a string value that specifies the handle. The default value is not set.

The below example illustrates the use of this option.



Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript"
          src="prototype.js">
  </script>
  
  <script type="text/javascript"
          src="scriptaculous.js">
  </script>
  
  <script type="text/javascript">
    window.onload = function () {
  
      // Draggable element with the
      // handle defined
      new Draggable('elem1', 
          { handle: 'handle_img' });
    };
  </script>
</head>
  
<body>
  <div>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </div>
  
  <strong>
    script.aculo.us Drag &
    Drop handle Option
  </strong>
  
  <p>
    Drag the elements to see the
    effect of the handle option.
    The element below can be dragged
    using its handle.
  </p>
    
  <p>
    The image below is used 
    as the handle
  </p>
    
  <!-- Define the image of the handle -->
  <img id="handle_img" 
       src="handle_img.png">
    
  <p>
    The image below is the 
    element to be dragged
  </p>
  
  <!-- Define the image to be dragged -->
  <img id="elem1" src="elem1.png">
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :