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"> neveropen </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> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Read More on on that Topic: geeksforgeeks.org/script-aculo-us-drag-drop-endeffect-option/ […]