首頁 > 開發者 > 手機程式開發

HTML5移動開發之路（16）——神奇的拖放功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：internet   瀏覽器   explorer   firefox   智能手機   

本文為 兄弟連IT教育 機構官方 HTML5培訓 教程，主要介紹：HTML5移動開發之路（16）——神奇的拖放功能

在智能手機發展飛速的現在拖放功能已經成為一種時尚，但是在我們的瀏覽器上是不是還缺少這種方便快捷的功能?在HTML5的新標準中就有關於拖放的標準，作為HTML5標準的一部分，任何元素都可以被拖放。

一、瀏覽器支援情況

 

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。

 

注釋：在 Safari 5.1.2 中不支援拖放。

二、使用方法

首先，為了使元素可拖動，把 draggable 屬性設定為 true ：

 

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. <img draggable="true" />  

然後，規定元素被拖動時，會發生什麼  

 

讓ondragstart屬性調用一個函數，並給該函數返回一個拖動對象

 

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. <img id="drag1" src="img_logo.gif" draggable="true"  

  2. ondragstart="drag(event)" width="336" height="69" />  


dataTransfer.setData() 方法設定被拖資料的資料類型和值：(我們將被拖動對象的id傳給dataTransfer)

 

 

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. function drag(ev)  

  2. {  

  3. <span style="white-space:pre">  </span>ev.dataTransfer.setData("Text",ev.target.id);  

  4. }  


放到何處 - ondragover

 

ondragover 事件規定在何處放置被拖動的資料。

預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. event.preventDefault()  

當放置被拖資料時，會發生 drop 事件。

在上面，ondrop 屬性調用了一個函數，drop(event)：


 

 

 

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. function drop(ev)  

  2. {  

  3. <span style="white-space:pre">  </span>ev.preventDefault();  

  4. <span style="white-space:pre">  </span>var data=ev.dataTransfer.getData("Text");  

  5. <span style="white-space:pre">  </span>ev.target.appendChild(document.getElementById(data));  

  6. }  

代碼解釋：

  • 調用 preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）

  • 通過 dataTransfer.getData("Text") 方法獲得被拖的資料。該方法將返回在 setData() 方法中設定為相同類型的任何資料。

  • 被拖資料是被拖元素的 id ("drag1")

  • 把被拖元素追加到放置元素（目標元素）中

 

二、執行個體說明

 

[html] view plain copy

 

 print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

  1. <!DOCTYPE HTML>  

  2. <html>  

  3.     <head>  

  4.         <script type="text/javascript">  

  5.             //阻止對元素的預設處理方式  

  6.             function allowDrop(ev)  

  7.             {  

  8.                 ev.preventDefault();  

  9.             }  

  10.               

  11.             //將被拖動對象的id傳遞給dataTransfer中間對象  

  12.             function drag(ev)  

  13.             {  

  14.                 ev.dataTransfer.setData("Text",ev.target.id);  

  15.             }  

  16.               

  17.             //取得拖動對象id找到對象執行個體並用DOM模型添加到<div>裡面  

  18.             function drop(ev)  

  19.             {  

  20.                 ev.preventDefault();  

  21.                 var data=ev.dataTransfer.getData("Text");  

  22.                 ev.target.appendChild(document.getElementById(data));  

  23.             }  

  24.         </script>  

  25.     </head>  

  26.     <body>  

  27.         <!--要被拖動到的地方-->  

  28.         <div id="div1" ondrop="drop(event)"    

  29.         ondragover="allowDrop(event)"    

  30.         style="border:1px solid red;width:300px;height:200px;">  

  31.         </div>  

  32.         <!--要被拖動的對象-->  

  33.         <img id="drag1" src="test.png" draggable="true"  

  34.         ondragstart="drag(event)"/>  

  35.   

  36.     </body>  

  37. </html>  

 

650) this.width=650;" src="http://img.my.csdn.net/uploads/201401/12/1389505406_5925.gif" style="border:0px;" />


HTML5移動開發之路（16）——神奇的拖放功能

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More