Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Drag 'n' Drop with greedy Option


previous next AddThis Social Bookmark Button


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 Printer Friendly

Advertisements


  

Advertisements