問題：突然奇想，想在電影網上加一個收藏（類似于購物車的東西），可以通過拖拽圖片進行添加

前提：需要了解HTML5中國Loacl Strorage（當然，其他的web存儲也行，我用的是Local Stroage）

解決：這里主要重點強調關于進行拖拽功能的細節，具體html和css就自己慢慢弄吧

首先這里先是對收藏按鈕進行點擊顯示新的p框（存放收藏的電影），二次點擊隱藏p框，這里不做過多介紹

為可以進行拖拽的圖片進行設置屬性：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;

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

3.分別編寫進行拖拽時的函數和拖拽完成的函數

//設置拖拽效果function drag(e){ e=e||event; e.dataTransfer.effectAllowed = copy  //IE需通過服務器訪問方式，FF、chrome支持本地方式進行訪問 e.dataTransfer.setData( text , e.target.src); //IE兼容寫法 //e.dataTransfer.setData( text/plain , e.target.src); //標準寫法}

“copy”那就是字面意思，復制一份當然的data，當然還有其他的屬性值，這里就不做進一步解釋

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

4.上述代碼中有關于key值讀取localstrorage的值，我將其封裝成了json對象，因為后期可能數據會增多，比如，不僅僅是加入圖片的src，還有可能是有關圖片的介紹，例如，導演，演員，簡介之類的信息，這時，用json對象會相對于更好一些

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

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

5。其實在這里，這個拖拽的功能就相當于是實現了

相關推薦：

原生js實現拖拽功能基本思路

如何在vue中實現拖拽功能

WPF實現拖拽功能

以上就是HTML5實現拖拽功能步驟詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。