Skip to content
Related Articles

Related Articles

Improve Article Drag & Drop change Option

  • Last Updated : 30 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 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.


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.



<!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', { 
        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"); 
    <h1 style="color: green"
  <strong Drag & 
    Drop change Option 
    The change callback would be invoked 
    whenever the element is being currently 
    Drag the image below and check 
    the console. 
  <img id="elem1" src="gfg.png"


My Personal Notes arrow_drop_up
Recommended Articles
Page :