使用 Containment 选项进行拖放

说明

它指定一个元素或元素数组，该元素或元素数组必须是可拖动项目的父元素，以便被放置目标接受。默认情况下，不应用任何包含约束。

语法

Droppables.add('element', {containment: 元素 ID 或父元素 ID 数组});

示例

在此示例中，您将只能放置父元素 ID 为"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() {
            // 使可拖动部分中的所有图像都变为可拖动图像。
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });
				
            // 使niceOne分区中的所有图像可拖动。

            $A($('niceOne').getElementsByTagName('img')).each(
               function(item) {
                  new Draggable(item, {revert: true, ghosting: true});
               }
            );
				
            Droppables.add('droparea',
               {
                  hoverclass: 'hoverActive',
                  containment: 'niceOne',
                  onDrop: moveItem
               }
            );
				
            // 默认设置放置区域为不清除。
            $('droparea').cleared = false;
         }
			
        // 目标放置区域包含一段说明性文字
        // ，当第一个项目
        // 被放入其中时，我们想要删除这段文字。
			
         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>

这将产生以下结果 −

scriptaculous_drag_drop.html