script.aculo.us - 拖放

Web 2.0 界面最受欢迎的功能是拖放功能。幸运的是，script.aculo.us 具有支持拖放的固有功能。

要使用 script.aculo.us 的拖动功能，您需要加载 dragdrop 模块，该模块还需要 effects 模块。因此，script.aculo.us 的最低加载量应如下所示:

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

拖动东西

使用 script.aculo.us 使项目可拖动非常简单。它需要创建 Draggable 类的实例，并标识要使其可拖动的元素。

Draggable 语法

new Draggable( element, options );

构造函数的第一个参数将要使其可拖动的元素标识为元素的 id 或对元素的引用。第二个参数指定了可拖动元素如何表现的可选信息。

可拖动选项

创建可拖动对象时，可以使用以下一个或多个选项。

回调选项

此外，您可以在 options 参数 − 中使用以下任何回调函数

除了"change"回调之外，每个回调都接受两个参数:Draggable 对象和鼠标事件对象。

Draggable 示例

在这里，我们定义了 5 个可拖动元素:三个 <div> 元素、一个 <img> 元素和一个 <span> 元素。三个不同的 <div> 元素的目的是证明无论元素以静态(默认)、相对还是绝对的定位规则开始，拖动行为都不会受到影响。

<html>
   <head>
      <title>Draggables Elements</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
      
      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
			
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }			
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
		
      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

这将产生以下结果 −

放置拖放对象

通过调用名为 Droppables 的命名空间中的 add() 方法，将元素转换为放置目标。

Droppables 命名空间有两个重要方法:add() 用于创建放置目标，remove() 用于删除放置目标。

语法

以下是用于创建放置目标的 add() 方法的语法。add() 方法使用作为其第一个参数传递的元素创建放置目标，并使用作为第二个参数传递的哈希中的选项。

Droppables.add( element, options );

remove() 的语法更加简单。remove() 方法从传递的元素中删除放置目标行为。

Droppables.remove(element);

选项

创建可拖动对象时，可以使用以下一个或多个选项。

回调选项

此外，您可以在 options 参数 − 中使用以下任何回调函数

示例

此处，此示例的第一部分与我们之前的示例类似，只是我们使用了 Prototype 方便的 $A() 函数将元素中所有 <img> 元素的节点列表转换为数组，元素中的 id 为 draggables。

<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});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', 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;
         }
			
         #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>

这将产生以下结果 −