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.

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>