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，也可以是元素的引用。第二个参数指定有关可拖动元素行为方式的可选信息。

Draggable 选项

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

选项 描述 示例
revert 如果设置为true，则元素在拖动结束时返回到其原始位置。还指定当拖动操作停止时是否会调用reverteffect回调。默认为false。

示例
snap 用于使可拖动对象捕捉到网格或约束其移动。如果为 false（默认值），则不会发生捕捉或约束。

  • 如果分配了一个整数 x，则可拖动对象将捕捉到 x 像素的网格。

  • 如果为数组 [x, y]，则水平拖动将捕捉到 x 像素的网格，垂直拖动将捕捉到 y 像素的网格。

  • 它也可以是符合Function( x , y , draggable ) 的函数，该函数返回数组 [x, y]。

示例
zindex 指定在拖动操作期间要应用于元素的 CSS z-index。默认情况下，元素的 z-index 在拖动时设置为 1000。

示例
ghosting 布尔值，确定是否应克隆可拖动对象以进行拖动，并在克隆对象被放下之前将其原件保留在原位。默认为false。

示例
constraint 用于限制可拖动方向的字符串，可以是horizontal或vertical。默认为null，表示自由移动。

示例
handle 指定用作启动拖动操作的句柄的元素。默认情况下，元素本身就是其自己的句柄。

示例
starteffect 拖动开始时在元素上调用的效果。默认情况下，它在 0.2 秒内将元素的不透明度更改为 0.2。

示例
reverteffect 拖动恢复时在元素上调用的效果。默认为平滑滑动到元素的原始位置。仅当revert为 true 时调用。

示例
endeffect 拖动结束时在元素上调用的效果。默认情况下，它在 0.2 秒内将元素的不透明度更改为 1.0。

示例

回调选项

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

函数 描述 示例
onStart 在启动拖动时调用。

示例
onDrag 当鼠标移动时重复调用，如果鼠标位置与上一次调用不同。

示例
change 与 onDrag 一样调用（这是首选回调）。

示例
onEnd 在拖动结束时调用。

示例

除了“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);

选项

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

选项 描述 示例
Hoverclass 放置目标处于活动状态（有可接受的可拖动对象悬停在其上）时将添加到元素的 CSS 类名称。默认为 null。

示例
Accept 描述 CSS 类的字符串或字符串数组。放置目标仅接受具有这些 CSS 类之一或更多 CSS 类的可拖动对象。

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

示例
Overlap 如果设置为“horizontal”或“vertical”，则放置目标仅对可拖动对象做出反应，如果其在给定方向上的重叠超过 50%。由 Sortables 使用，在下一章中讨论。  
greedy 如果为 true（默认值），则它会停止悬停其他放置目标，可拖动对象下方的放置目标将不会被搜索。

示例

回调选项

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

函数 描述 示例
onHover 指定当合适可拖动项目悬停在放置目标上时激活的回调函数。由 Sortables 使用，在下一章中讨论。  
onDrop 指定当合适可拖动元素被放置到放置目标上时调用的回调函数。

示例

示例

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

实时演示 
<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', 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>

这将产生以下结果 -

打印页面
上一页
下一页
广告