This script.aculo.us Drag & Drop greedy Option is used to stops processing hovering other droppable, under the drag-gable won’t be searched. The default value of this option is true, that means the drop area will accept the draggable element false won’t.
Syntax:
Droppables.add('element', {greedy: false or true});
Example:
html
<!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', greedy: false, 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; } #droparea { float: left; width: 650px; height: 90px; 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 greedy Option </strong> <div id="draggables"> <img src="gfg.png"> <img src="gfg1.png"> </div> <div id="droparea"> Drag the Image and Drop Your Image in this area </div></body></html> |
Output:
- Before drag and drop:
- After drag and drop: Drop area won’t accept the element.
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!
