通過(guò)拖拽實(shí)現(xiàn)頁(yè)面元素的位置改變
- 實(shí)現(xiàn)拖拽效果
- 源元素 - 要拖拽的文件
- 目標(biāo)元素 - 要拖拽到哪里去
- 目前實(shí)現(xiàn)拖拽效果
- 使用原生DOM就能實(shí)現(xiàn) - 最麻煩
- 使用jQuery的插件
- HTML5種提供的拖拽功能
- HTML5拖拽
-
源元素事件
dragStart - 當(dāng)鼠標(biāo)開(kāi)始拖放時(shí)被觸發(fā) drag - 當(dāng)鼠標(biāo)拖放過(guò)程中被觸發(fā) dragend 當(dāng)鼠標(biāo)拖放結(jié)束時(shí)被觸發(fā) -
目標(biāo)元素事件
dragover - 當(dāng)鼠標(biāo)到達(dá)目標(biāo)元素被觸發(fā)，會(huì)反復(fù)觸發(fā) dragenter - 當(dāng)鼠標(biāo)拖放進(jìn)入到目標(biāo)元素內(nèi)觸發(fā) drop - 當(dāng)鼠標(biāo)實(shí)現(xiàn)拖放效果時(shí)被觸發(fā)
問(wèn)題：HTML頁(yè)面默認(rèn)不允許拖放，稱之為HTML頁(yè)面的默認(rèn)行為
解決：在dragover的事件中組織默認(rèn)行為即可event.preventDefault();
dragleave - 當(dāng)鼠標(biāo)離開(kāi)目標(biāo)元素時(shí)觸發(fā)
- dataTransfer對(duì)象
- 作用：類似于window系統(tǒng)的剪切板功能
- 功能：可以將源元素的信息，存儲(chǔ)在這里，提供給目標(biāo)元素
使用事件對(duì)象獲取到dataTransfer對(duì)象
var trans = event.dataTransfer;設(shè)置數(shù)據(jù)
setData(type,data)方法
type:類型，特指標(biāo)識(shí)(id)，一般為字符串
data:設(shè)置的數(shù)據(jù)內(nèi)容
獲取數(shù)據(jù)
getData(type);清除數(shù)據(jù)
clearData(type)
所有的數(shù)據(jù)內(nèi)容，存儲(chǔ)在瀏覽器內(nèi)存中，當(dāng)使用完數(shù)據(jù)內(nèi)容時(shí)，要清除事件對(duì)象 - 作為事件處理函數(shù)的參數(shù)存在
DOM底層代碼的默認(rèn)寫(xiě)法就是event,如果直接使用event就可以不穿event參數(shù)，這種寫(xiě)法不標(biāo)準(zhǔn)
4.從本地拖拽文件到頁(yè)面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件讀取對(duì)象
var reader = new FileReader();
//讀取文件
reader.readAsDataURL(file);
//讀取完以后加載
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
5.setDragImage()
作用：修改拖放過(guò)程中，鼠標(biāo)跟隨的圖片效果
用法：drag/dragstart等事件
注意：實(shí)際操作中，該方法幾乎不用