This script.aculo.us Drag & Drop endeffect Option is used to define the function which is called when a suitable drag-gable element stops being dragged. The function can be used to define any effect.
Syntax:
{ endeffect: effectFunction }
Values:
- effectFunction: This value defines the function that contains the effect to be shown when the drag-gable stops being dragged.
The below example illustrates Drag & Drop endeffect Option:
Example:
HTML
<!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 =
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" >
</ div >
< br >
< br >
< div id = "droparea" >
Drag the Image and Drop Your Image
in this area
</ div >
</ body >
</ html >
|
Output: