Copyright © tutorialspoint.com

Drag 'n' Drop with hoverclass Option

previous next


Advertisements

Description:

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

Syntax:

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

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

Example:

In this example drop area becomes ligh yellow when you tried tro drop an item in that area.

<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',
        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;
}
#draggables img, #droparea img {
   margin: 4px;
   border:1px solid red;
}
</style>
</head>
<body>
<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>

<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.


previous next

Copyright © tutorialspoint.com