Copyright © tutorialspoint.com

Drag 'n' Drop with greedy Option

previous next


Advertisements

Description:

If this option is set to true (default) it stops processing hovering other droppables under the draggable won't be searched.

Syntax:

Droppables.add('element', {greedy: false or true});

Example:

Just try this example by setting greedy to true and flase one by one. You will find that if you set greedy to false then you can not drop an item in drop 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',
        greedy: false,
        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