Skip to content
Related Articles

Related Articles Drag & Drop handle Option

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Dec, 2020

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


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



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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!