如何使用HTML5實現拖拽功能

這篇文章給大家分享的是有關如何使用HTML5實現拖拽功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

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

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

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

　　為可以進行拖拽的圖片進行設置屬性：draggable屬性和ondragstart事件

　　varpic_list=document.getElementsByClassName("middle_content")[0];

　　varpic_list_li=pic_list.getElementsByTagName("li");

　　for(vari=0;i<pic_list_li.length;i++){

　　varimage=pic_list_li[i].getElementsByTagName("img")[0];

　　image.setAttribute("draggable",true);

　　image.ondragstart=drag;

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

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

　　//設置拖拽效果

　　functiondrag(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，當然還有其他的屬性值，這里就不做進一步解釋

　　//拖拽釋放效果

　　functiondrop(e){

　　//方式拖拽事件傳播

　　allowDrop(e);

　　//從拖拽事件中獲取數據

　　vardata=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讀取數據

　　varnewFilms=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的值并封裝成JSON

　　functionreadFromStorage(key){

　　varjsonStr=localStorage.getItem(key);

　　varnewFilms=JSON.parse(jsonStr);

　　returnnewFilms;

　　}

感謝各位的閱讀！關于“如何使用HTML5實現拖拽功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！