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!
