<!DOCTYPE html>
<
html
>
<
head
>
<
script
type
=
"text/javascript"
src
=
"scriptaculous-js-1.9.0/lib/prototype.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"scriptaculous-js-1.9.0/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
});
});
Droppables.add('droparea', {
hoverclass: 'hoverActive',
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;
}
#gfg {
width: 550px;
height: 73px;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"draggables"
>
<
img
src
=
</
div
>
</
body
>
</
html
>