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>