Copyright © tutorialspoint.com
This is a string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.
Droppables.add('element', {accept: 'cssClass'}); |
Here cssClass is a CSS class and only element with that class will be accepted in drop zone. You can specify an array of CSS classes.
In this example you will be able to drop only images with "niceOne" CSS class.
<html> <head> <title>Drag and Drop Example</title> <script type="text/javascript" src="/javascript/prototype.js"></script> <script type="text/javascript" src="/javascript/scriptaculous.js"></script> <script type="text/javascript"> window.onload = function() { // Make all the images draggables from draggables division. $A($('draggables').getElementsByTagName('img')).each( function(item) { new Draggable( item, { revert: true, ghosting: true } ); } ); Droppables.add( 'droparea', { hoverclass: 'hoverActive', accept: 'niceOne', onDrop: moveItem } ); // Set drop area by default non cleared. $('droparea').cleared = false; } // The target drop area contains a snippet of instructional // text that we want to remove when the first item // is dropped into it. 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: 172px; border: 3px ridge blue; float: left; padding: 9px; } #droparea { float: left; margin-left: 16px; width: 172px; border: 3px ridge maroon; text-align: center; font-size: 24px; padding: 9px; float: left; } .hoverActive { background-color: #ffffcc; } .niceOne { border:10px dotted red; } #draggables img, #droparea img { margin: 4px; border:1px solid red; } </style> </head> <body> <div id="draggables"> <img class="niceOne" src="/images/html.gif"/> <img src="/images/css.gif" /> <img class="niceOne" src="/images/xhtml.gif"/> <img src="/images/wml_logo.gif"/> <img class="niceOne" src="/images/javascript.gif"/> </div> <div id="droparea"> Drag and Drop Your Images in this area </div> </body> </html> |
To understand it in better way you can Try it yourself.
Copyright © tutorialspoint.com