Web | This Site

Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# Drag 'n' Drop with Containment Option

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

Advertisement

Online Image Processing

Indian Baby Names