html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作_HTML5教程

推薦：HTML5引入的新數(shù)組TypedArray介紹
Javascript中的數(shù)組是個(gè)強(qiáng)大的家伙：你可以創(chuàng)建的時(shí)候不規(guī)定長(zhǎng)度，而是動(dòng)態(tài)的去改變長(zhǎng)度。你可以把他當(dāng)成普通的數(shù)組去讀取，也可以當(dāng)他是堆棧來(lái)使用。你可以改變數(shù)組中每個(gè)元素的值甚至是類型

HTML5之前，要實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過(guò)大量的JS代碼來(lái)實(shí)現(xiàn)；HTML5中引入了直接支持拖放操作的API，大大簡(jiǎn)化了網(wǎng)頁(yè)元素的拖放操作編程難度，并且這些API除了支持瀏覽器內(nèi)部元素的拖放外，同時(shí)支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動(dòng)。

本文通過(guò)一個(gè)簡(jiǎn)單示例，演示HTML5中拖放API的使用方法。

場(chǎng)景：

如下圖所示，我們要實(shí)現(xiàn)：

通過(guò)拖放將照片從左側(cè)“相冊(cè)”區(qū)域拖拽到右側(cè)“垃圾箱”區(qū)域；拖拽過(guò)程中，“溫馨提示”部分要及時(shí)提醒，當(dāng)前正在進(jìn)行拖放操作；

實(shí)現(xiàn)方法：

如上界面的HTML代碼比較簡(jiǎn)單，如下：

復(fù)制代碼代碼如下:www.hl5o.cn

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5實(shí)現(xiàn)拖拽操作</title>
    <meta charset="utf-8"/>
    <style>
        .album
        {
            border: 3px dashed #ccc;
            float: left;
            margin: 10px;
            min-height: 100px;
            padding: 10px;
            width: 220px;
        }
    </style>
</head>
<body">
    <div id="info">
        <h2>溫馨提示：可將照片直接拖到垃圾箱中</h2>
    </div>
    <div id="album" class="album">
        <h2>相冊(cè)</h2>
        <img draggable="true" id="img1" src="img/bg_01.png"  />
        <img draggable="true" id="img2" src="img/bg_02.png"  />
        <img draggable="true" id="img3" src="img/bg_03.png"  />
    </div>
    <div id="trash" class="album">
        <h2>垃圾箱</h2>
    </div>
    <br/>
</body>
</html>