問題：突然奇想，想在電影網(wǎng)上加一個(gè)收藏（類似于購(gòu)物車的東西），可以通過(guò)拖拽圖片進(jìn)行添加

前提：需要了解HTML5中國(guó)Loacl Strorage（當(dāng)然，其他的web存儲(chǔ)也行，我用的是Local Stroage）

解決：這里主要重點(diǎn)強(qiáng)調(diào)關(guān)于進(jìn)行拖拽功能的細(xì)節(jié)，具體html和css就自己慢慢弄吧

首先這里先是對(duì)收藏按鈕進(jìn)行點(diǎn)擊顯示新的p框（存放收藏的電影），二次點(diǎn)擊隱藏p框，這里不做過(guò)多介紹

為可以進(jìn)行拖拽的圖片進(jìn)行設(shè)置屬性：draggable屬性和ondragstart事件

var pic_list=document.getElementsByClassName( middle_content )[0]; var pic_list_li=pic_list.getElementsByTagName( li  for(var i=0;i pic_list_li.length;i++){ var image=pic_list_li[i].getElementsByTagName( img )[0]; image.setAttribute( draggable ,true); image.ondragstart=drag;

我這里的代碼就是獲取所選要拖拽圖片的父元素，然后進(jìn)行遍歷，將每一個(gè)img都設(shè)置屬性和事件

3.分別編寫進(jìn)行拖拽時(shí)的函數(shù)和拖拽完成的函數(shù)

//設(shè)置拖拽效果function drag(e){ e=e||event; e.dataTransfer.effectAllowed = copy  //IE需通過(guò)服務(wù)器訪問方式，F(xiàn)F、chrome支持本地方式進(jìn)行訪問 e.dataTransfer.setData( text , e.target.src); //IE兼容寫法 //e.dataTransfer.setData( text/plain , e.target.src); //標(biāo)準(zhǔn)寫法}

“copy”那就是字面意思，復(fù)制一份當(dāng)然的data，當(dāng)然還有其他的屬性值，這里就不做進(jìn)一步解釋

//拖拽釋放效果function drop(e){ //方式拖拽事件傳播 allowDrop(e); //從拖拽事件中獲取數(shù)據(jù) var data=e.dataTransfer.getData( text  //e.target.id== dropdown ，表示目標(biāo)對(duì)象是p（dropdown） //e.target.parentNode.id== dropdown 表示目標(biāo)對(duì)象是dropdown的直接子元素UL //e.target.parentNode.parentNode.id== dropdown 表示目標(biāo)對(duì)象是UL中的LI //e.target.parentNode.parentNode.parentNode.id== dropdown 表示目標(biāo)對(duì)是 a 元素 //e.target.parentNode.parentNode.parentNode.parentNode.id== dropdown 表示目標(biāo)對(duì)象是 img 元素 if(e.target.id== dropdown || e.target.parentNode.id== dropdown  || e.target.parentNode.parentNode.id== dropdown  || e.target.parentNode.parentNode.parentNode.id== dropdown  || e.target.parentNode.parentNode.parentNode .parentNode.id== dropdown ){ //從localStorage中嘗試根據(jù)Src讀取數(shù)據(jù) var newFilms=readFromStorage(data); if (newFilms==null){ films.filmsSrc=data; //把處理后的商品信息存儲(chǔ)到localStorage localStorage.setItem(data, JSON.stringify(films)); //重新加載并刷新頁(yè)面中的collect document.getElementsByClassName( dropdown )[0].innerHTML=loadCollect();}

4.上述代碼中有關(guān)于key值讀取localstrorage的值，我將其封裝成了json對(duì)象，因?yàn)楹笃诳赡軘?shù)據(jù)會(huì)增多，比如，不僅僅是加入圖片的src，還有可能是有關(guān)圖片的介紹，例如，導(dǎo)演，演員，簡(jiǎn)介之類的信息，這時(shí)，用json對(duì)象會(huì)相對(duì)于更好一些

所有需要將讀取的localstroage值封裝成json對(duì)象

//根據(jù)key讀取localStorage的值并封裝成JSONfunction readFromStorage(key){ var jsonStr=localStorage.getItem(key); var newFilms=JSON.parse(jsonStr); return newFilms;}

5。其實(shí)在這里，這個(gè)拖拽的功能就相當(dāng)于是實(shí)現(xiàn)了

相關(guān)推薦：

原生js實(shí)現(xiàn)拖拽功能基本思路

如何在vue中實(shí)現(xiàn)拖拽功能

WPF實(shí)現(xiàn)拖拽功能

以上就是HTML5實(shí)現(xiàn)拖拽功能步驟詳解的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。