推薦課程HTML5教程拖drag放drop在頁(yè)面中是一種常見(jiàn)的HTML5特效，它所表示的就是抓取對(duì)象以后再拖放到另一個(gè)位置在 HTML5 中，任何元素都能可以進(jìn)行拖放，所以接下來(lái)在文章中將通過(guò)實(shí)例詳細(xì)告訴大家如何實(shí)現(xiàn)拖。

這個(gè)需要用到j(luò)avascript，拖拽時(shí)添加屬性樣式就行了。

html5這個(gè)屬性只是標(biāo)明這個(gè)層，可以做這個(gè)動(dòng)作而已你真正要操作這個(gè)動(dòng)作，你需要js來(lái)操作它。

1創(chuàng)建兩個(gè)html文件，一個(gè)test一個(gè)test22打開(kāi)test頁(yè)面，在里面創(chuàng)建一個(gè)div，并給其添加onmousedown與move方法3打開(kāi)后我們發(fā)現(xiàn)是一個(gè)棕綠的頁(yè)面4定義兩個(gè)變量，startx為鼠標(biāo)按下的坐標(biāo)，endx為鼠標(biāo)移動(dòng)的坐標(biāo)。

ondrop事件被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開(kāi)觸發(fā)的事件，作用在目標(biāo)元素上ondragend事件拖拽完成后觸發(fā)事件，作用在被拖拽元素上EventpreventDefault方法阻止默認(rèn)方法執(zhí)行ondragover中一定要執(zhí)行preventDefault。

拖拽的過(guò)程就不說(shuō)了，這里主要說(shuō)一下如何在前端獲取到圖片的相關(guān)信息html5里有一個(gè)fileReader的全局變量，用來(lái)讀取本地文件，比如txt，img等，下面是一個(gè)簡(jiǎn)單的代碼function checkFilefilesvar file = files0var。