script.aculo.us Drag & Drop change Option

Last Updated : 30 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 change option is called just like the onDrag option, i.e. it is used to specify a callback function that would be invoked whenever the element is currently being dragged. But the onDrag option is the more preferred one as compared to the change option.

Syntax:

new Draggable('element', {change: '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="javascript/prototype.js">  
  </script>  
  <script type="text/javascript"
    src="javascript/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', {  
        change: (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 change Option  
  </strong>  
      
    
<p>  
    The change 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="gfg.png">  
</body>  
</html>