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

最後更新：2016-10-20 來源：互聯網

上載者：User

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

標籤：

本文為兄弟連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?

<img draggable="true" />

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

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

[html] view plain copy  print?

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

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

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

[html] view plain copy  print?

function drag(ev)

{

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

}

放到何處 - ondragover

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

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

這要通過調用 ondragover 事件的 event.preventDefault() 方法：
[html] view plain copy  print?

event.preventDefault()

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

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

[html] view plain copy  print?

function drop(ev)

{

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

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

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

}

代碼解釋：

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

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

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

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

二、執行個體說明

[html] view plain copy  print?

<!DOCTYPE HTML>

<html>

    <head>

        <script type="text/javascript">

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

            function allowDrop(ev)

            {

                ev.preventDefault();

            }



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

            function drag(ev)

            {

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

            }



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

            function drop(ev)

            {

                ev.preventDefault();

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

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

            }

        </script>

    </head>

    <body>

        

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

        ondragover="allowDrop(event)"

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

        </div>

        

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

        ondragstart="drag(event)"/>



    </body>

</html>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

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

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support