Drag & Drop with hoverclass Option



This is the name of a CSS class that will be added to an element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.


Droppables.add('element', {hoverclass: 'cssClass'});

Here cssClass is a CSS class and will be applied to the element.


In this example, drop area becomes light yellow when you try to drop an item in that area.

      <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', 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;
      <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;
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
      <div id="draggables">
         <img src="/images/html.gif"/>
         <img src="/images/css.gif"/>
         <img src="/images/xhtml.gif"/>
         <img src="/images/wml_logo.gif"/>
         <img src="/images/javascript.gif"/>

      <div id="droparea">
         Drag and Drop Your Images in this area

This will produce following result −


E-Books Store