html5圖片拖動(dòng)的代碼

一、關(guān)于拖拽API

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)濮陽(yáng)縣免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

拖拽API是HTML5的新特性，相對(duì)于其他新特性來(lái)說(shuō)，重要程度占到6成，實(shí)際開(kāi)發(fā)中使用比例占到3成，學(xué)習(xí)要求個(gè)人認(rèn)為是達(dá)到掌握即可的程度。

二、什么是拖拽和釋放？

拖拽：Drag

釋放：Drop

拖拽指的是鼠標(biāo)點(diǎn)擊源對(duì)象后一直移動(dòng)對(duì)象不松手，一但松手即釋放了

三、什么是源對(duì)象和目標(biāo)對(duì)象？

源對(duì)象：指的是我們鼠標(biāo)點(diǎn)擊的一個(gè)事物，這里可以是一張圖片，一個(gè)DIV，一段文本等等。

目標(biāo)對(duì)象：指的是我們拖動(dòng)源對(duì)象后移動(dòng)到一塊區(qū)域，源對(duì)象可以進(jìn)入這個(gè)區(qū)域，可以在這個(gè)區(qū)域上方懸停(未松手)，可以釋松手釋放將源對(duì)象放置此處(已松手)，也可以懸停后離開(kāi)該區(qū)域。

四、拖拽API的相關(guān)函數(shù)

解釋了什么是源對(duì)象和目標(biāo)對(duì)象后，回歸前端中的拖拽API，由上面的操作我們可以得出幾個(gè)函數(shù)

被拖動(dòng)的源對(duì)象可以觸發(fā)的事件：

(1)ondragstart：源對(duì)象開(kāi)始被拖動(dòng)

(2)ondrag：源對(duì)象被拖動(dòng)過(guò)程中(鼠標(biāo)可能在移動(dòng)也可能未移動(dòng))

(3)ondragend：源對(duì)象被拖動(dòng)結(jié)束

拖動(dòng)源對(duì)象可以進(jìn)入到上方的目標(biāo)對(duì)象可以觸發(fā)的事件：

(1)ondragenter：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著進(jìn)入

(2)ondragover：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著懸停在上方

(3)ondragleave：源對(duì)象拖動(dòng)著離開(kāi)了目標(biāo)對(duì)象

(4)ondrop：源對(duì)象拖動(dòng)著在目標(biāo)對(duì)象上方釋放/松手

拖拽API總共就是7個(gè)函數(shù)！！

五、如何在拖動(dòng)的源對(duì)象事件和目標(biāo)對(duì)象事件間傳遞數(shù)據(jù)

HTML5為所有的拖動(dòng)相關(guān)事件提供了一個(gè)新的屬性：

e.dataTransfer { } //數(shù)據(jù)傳遞對(duì)象

功能：用于在源對(duì)象和目標(biāo)對(duì)象的事件間傳遞數(shù)據(jù)

源對(duì)象上的事件處理中保存數(shù)據(jù)：

e.dataTransfer.setData( k, v ); //k-v必須都是string類型

目標(biāo)對(duì)象上的事件處理中讀取數(shù)據(jù)：

var v = e.dataTransfer.getData( k );

html5 拖動(dòng)效果怎么在手機(jī)上實(shí)現(xiàn)

html5 拖動(dòng)效果在手機(jī)上實(shí)現(xiàn)方法是調(diào)用drag和drop一系列函數(shù)實(shí)現(xiàn)的。

注意：拖拽源在拖拽操作結(jié)束將得到dragend事件對(duì)象，不管操作成功與否。

舉例：

定義可拖放內(nèi)容

div id="columns"

div class="column" draggable="true"headerA/header/div

div class="column" draggable="true"headerB/header/div

div class="column" draggable="true"headerC/header/div

/div

2、監(jiān)聽(tīng)拖動(dòng)事件

可附加大量不同事件以監(jiān)聽(tīng)整個(gè)拖放過(guò)程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.這里是開(kāi)始拖拽

function handleDragStart(e) {

this.style.opacity = '0.4'; ?// this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');

[].forEach.call(cols, function(col) {

col.addEventListener('dragstart', handleDragStart, false);

});

b.dragenter、dragover?和?dragleave?事件處理程序可用于在拖動(dòng)過(guò)程中提供額外的可視化提示。例如，在拖動(dòng)期間將鼠標(biāo)懸停在某一列上方時(shí)，其邊框可能會(huì)變成虛線。這樣，用戶就能知道這些列也是放置的目標(biāo)區(qū)域。

html5 圖片上傳 可收縮 拖拽

可以參考chrome小樂(lè)圖客擴(kuò)展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網(wǎng)址上傳，是通過(guò)html5 file reader實(shí)現(xiàn)的。

網(wǎng)頁(yè)名稱：html5圖片拖拽,html元素拖拽
網(wǎng)站鏈接：http://chinadenli.net/article8/dsedcip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站維護(hù)、云服務(wù)器、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)