Skip to content
Related Articles

Related Articles Drag & Drop onDrag Option
  • Last Updated : 25 Dec, 2020

The 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

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.


{ 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.







<!DOCTYPE html>
  <script type="text/javascript" 
  <script type="text/javascript"
  <script type="text/javascript">
    window.onload = function () {
      // Define a function to be used
      // when the element is being dragged
      new Draggable('elem1', {
        onDrag: (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");
    <h1 style="color: green">
  <strong> Drag &
    Drop onDrag Option
    The onDrag callback would be invoked
    whenever the element is being currently
    Drag the image below and check
    the console.
  <img id="elem1" src="elem1.png">





My Personal Notes arrow_drop_up
Recommended Articles
Page :