當前位置 : IT培訓網 > Web前端 > Web教程 > HTML5 如何在網頁中實現拖放(Drag 和 Drop)

HTML5 如何在網頁中實現拖放(Drag 和 Drop)

時間:2016-12-07 12:05:10??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
標簽(Tag):?? html5(196)Drag(4)Drop(4)
隨著網頁設計技術的更新換代,在網頁中實現拖放功能越來越方便了,不僅省去了網頁開發者的寫代碼的繁瑣,也為企業實現更多的網站功能做出了不菲的貢獻,如果你想學習這方面的知識,想要實現更多的拖放效果,那就一起來

隨著HTML5的出現,在網頁中實現拖放已經不是什么難事了,只要我們掌握了拖放的代碼,加以熟練運用即可。想要學習HTML5拖放功能的小盆友們,趕緊隨著IT培訓網小編來看看吧!

拖放(Drag 和 drop)是 HTML5 標準的組成部分。

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

將w3cschool圖標拖動到矩形框中。

拖放

拖放是一種常見的特性,即抓取對象以后拖到另一個位置。

在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放。

瀏覽器支持

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。

注意:Safari 5.1.2不支持拖動.

HTML5 拖放實例

下面的例子是一個簡單的拖放實例:

實例

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>it培訓網(www.oalvodamoda.com)</title>

<style type="text/css">

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script>

function allowDrop(ev)

{

    ev.preventDefault();

}

 

function drag(ev)

{

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

}

function drop(ev)

{

    ev.preventDefault();

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

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

}

</script>

</head>

<body>

<p>拖動 W3CSchool.cc 圖片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

</html>

運行結果:

拖動前:

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

拖動后:

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

它看上去也許有些復雜,不過我們可以分別研究拖放事件的不同部分。

設置元素為可拖放

首先,為了使元素可拖動,把 draggable 屬性設置為 true :

<img draggable="true">

拖動什么 - ondragstart 和 setData()

然后,規定當元素被拖動時,會發生什么。

在上面的例子中,ondragstart 屬性調用了一個函數,drag(event),它規定了被拖動的數據。

dataTransfer.setData() 方法設置被拖數據的數據類型和值:

function drag(ev)

{

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

}

在這個例子中,數據類型是 "Text",值是可拖動元素的 id ("drag1")。

放到何處 - ondragover

ondragover 事件規定在何處放置被拖動的數據。

默認地,無法將數據/元素放置到其他元素中。如果需要設置允許放置,我們必須阻止對元素的默認處理方式。

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

event.preventDefault()

進行放置 - ondrop

當放置被拖數據時,會發生 drop 事件。

在上面的例子中,ondrop 屬性調用了一個函數,drop(event):

function drop(ev)

{

    ev.preventDefault();

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

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

}

代碼解釋:

調用 preventDefault() 來避免瀏覽器對數據的默認處理(drop 事件的默認行為是以鏈接形式打開)

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

被拖數據是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目標元素)中

來回拖動實例:

如何在兩個 <div> 元素之間拖放圖像。

源代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>it培訓網(www.oalvodamoda.com)</title>

<style type="text/css">

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script>

function allowDrop(ev)

{

         ev.preventDefault();

}

function drag(ev)

{

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

}

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)">

         <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

運行結果:

拖動前效果:

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

拖動后效果:

HTML5 如何在網頁中實現拖放(Drag 和 Drop)_www.oalvodamoda.com

隨著網頁設計技術的更新換代,在網頁中實現拖放功能越來越方便了,不僅省去了網頁開發者的寫代碼的繁瑣,也為企業實現更多的網站功能做出了不菲的貢獻,如果你想學習這方面的知識,想要實現更多的拖放效果,那就一起來吧,報讀IT培訓網H5培訓班,讓你學網頁設計輕松有趣。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天