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>

這將產生以下結果 -

列印頁面
上一頁
下一頁
廣告