<!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 () {
$A($('draggables').getElementsByTagName('img'))
.each(function (item) {
new Draggable(item, {
revert: true, ghosting: true,
// Define the effect to be used when
// the draggable is stopped dragging
endeffect: function (element) {
new Effect.Opacity(element, {
from: 0,
to: 1.0,
duration: 5
})
}
});
});
Droppables.add('droparea',
{ onDrop: moveItem }
);
// Set drop area default non cleared.
$('droparea').cleared = false;
}
function moveItem(draggable, droparea) {
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</
script
>
<
style
type
=
"text/css"
>
#draggables {
width: 550px;
height: 73px;
}
#droparea {
float: left;
width: 550px;
height: 73px;
border: 2px solid gray;
text-align: center;
font-size: 16px;
padding: 12px;
}
</
style
>
</
head
>
<
body
>
<
div
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
p
>A Computer Science Portal for Geeks</
p
>
</
div
>
<
strong
>
script.aculo.us Drag & Drop
endeffect Option
</
strong
>
<
div
id
=
"draggables"
>
<
img
src
=
</
div
>
<
br
>
<
br
>
<
div
id
=
"droparea"
>
Drag the Image and Drop Your Image
in this area
</
div
>
</
body
>
</
html
>