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