Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Drag & Drop onStart 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 onStart option is used to specify a callback function that would be invoked whenever the dragging of the element starts. The element which is 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:

{ onStart: 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 dragging of an element starts.

The below examples illustrates the use of this option.

Example 1:

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 starts to 
      // be dragged
      new Draggable('elem1', {
        onStart: (elem) => {
          console.log("The element has"
          + " started to being dragged");
          console.log(elem);
        }
      });
    };
  </script>
</head>
  
<body>
  <div>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </div>
  <strong>
    script.aculo.us Drag &
    Drop onStart Option
  </strong>
    
  <p>
    The onStart callback would be 
    invoked whenever the element is
    started to be dragged.
  </p>
   
  <p>
    Drag the image below and 
    check the console.
  </p>
  
  <img id="elem1" src="elem1.png">
</body>
</html>

Output:

Example 2:

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 () {
      new Draggable('elem1', {
  
        // Define a function to be used
        // when the element starts
        // to be dragged
        onStart: () => {
          new Effect.Pulsate('elem1',
          );
        }
      });
    };
  </script>
</head>
<body>
  <div>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </div>
  <strong>
    script.aculo.us Drag &
    Drop onStart Option
  </strong>
    
  <p>
    The onStart callback would be
    invoked whenever the element is
    started to be dragged.
  </p>
  
  <p>
    Drag the image below to notice
    the visual effect.
  </p>
  
  <img id="elem1" src="elem1.png">
</body>
</html>

Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :