Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Drag & Drop onDrag 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 onDrag option is used to specify a callback function that would be invoked whenever the element is currently being dragged. The element which is being dragged would be passed as the parameter to the function.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Include Scripts:

Step 1: Before getting started, You will require to download the script files which are included in the <head> tag of our HTML page.  You can download it from http://script.aculo.us/downloads



Step 2: Unzip the files and put the required files (mainly prototype.js and scriptaculous.js) in the current root directory of your folder.

Step 3: Place any image of your choice in the current root directory of your folder, like in the following example elem1.png is used.

Syntax:

{ onEnd: function }

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

  • function: This is a callback function that would be invoked whenever the element is being dragged.

The below example illustrates the use of this option.

Example:

HTML




<!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 () {
  
      // Define a function to be used
      // when the element is being dragged
      new Draggable('elem1', {
        onDrag: (elem) => {
          console.log("The element is "
            + "currently being dragged");
  
          // The element that is being dragged
          // can be accessed using the parameter
          // in the callback function
        },
  
        onEnd: () => {
          console.log("The dragging of "
            + "the element has stopped");
        }
      });
    };
  </script>
</head>
<body>
  <div>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </div>
  <strong>
    script.aculo.us Drag &
    Drop onDrag Option
  </strong>
    
  <p>
    The onDrag callback would be invoked
    whenever the element is being currently
    dragged.
  </p>
  
  <p>
    Drag the image below and check
    the console.
  </p>
  
  <img id="elem1" src="elem1.png">
</body>
</html>

Output:

Reference: http://script.aculo.us/




My Personal Notes arrow_drop_up
Recommended Articles
Page :