Copyright © tutorialspoint.com

Drag 'n' Drop with Containment Option

previous next


Advertisements

Description:

This specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.

Syntax:

Droppables.add('element', 
         {containment: element ID or array of parent's IDs});

Example:

In this example you will be able to drop only images whose parant ID is "niceOne".

<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
            }
         );
      }
   );
   // Make all the images draggables from niceOne division.
   $A($('niceOne').getElementsByTagName('img')).each(
      function(item) {
         new Draggable(
            item,
            {
               revert: true,
               ghosting: true
            }
         );
      }
   );
   Droppables.add(
     'droparea',
     {
        hoverclass: 'hoverActive',
        containment: '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;
}
#niceOne {
   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;
}
#niceOne img, #droparea img {
   margin: 4px;
   border:1px solid red;
}
</style>
</head>
<body>

<div id="niceOne">
   <img src="/images/html.gif"/>
   <img src="/images/xhtml.gif"/>
   <img src="/images/javascript.gif"/>
</div>
<div id="draggables">
   <img src="/images/css.gif"/>
   <img src="/images/wml_logo.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