Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :