<!DOCTYPE html>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
"javascript/prototype.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"javascript/scriptaculous.js"
>
</
script
>
<
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");
}
});
};
</
script
>
</
head
>
<
body
>
<
div
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
</
div
>
<
strong
>
script.aculo.us Drag &
Drop change Option
</
strong
>
<
p
>
The change callback would be invoked
whenever the element is being currently
dragged.
</
p
>
<
p
>
Drag the image below and check
the console.
</
p
>
<
img
id
=
"elem1"
src
=
"gfg.png"
>
</
body
>
</
html
>