script.aculo.us Drag & Drop accept Option
This script.aculo.us Drag & Drop accept Option is used to create an active accept condition where you can drag a draggable element to a drop area. In that drop area, the element will be placed if the accept class is the same as the class of your draggable element.
Syntax:
Droppables.add('element', {accept: 'cssClass'});
Example: In this example, both the image are draggable but drop area will only accept where the image tag class is ‘gfg’.
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", accept: "gfg", 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: 650px; height: 90px; border: 2px solid gray; text-align: center; font-size: 16px; padding: 12px; } </ style > </ head > < body > < div > < h1 style="color: green;"> w3wiki </ h1 > < p >A Computer Science Portal for Beginner</ p > </ div > < strong > script.aculo.us Drag & Drop accept Option </ strong > < div id="draggables"> < img src="gfg.png" /> < img class="gfg" 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:
Contact Us