HTML5完成拖拽技巧步驟詳細(xì)說明

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

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

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

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

2. 為可以進(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)行遍歷，將每一個img都設(shè)置屬性和事件

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

//設(shè)置拖拽效果
function drag(e){
	e=e  event;
	e.dataTransfer.effectAllowed = "copy";
	//IE需通過服務(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)對象是p（dropdown）
	//e.target.parentNode.id=="dropdown"表示目標(biāo)對象是dropdown的直接子元素UL
	//e.target.parentNode.parentNode.id=="dropdown" 表示目標(biāo)對象是UL中的LI
	//e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目標(biāo)對是<a>元素
	//e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目標(biāo)對象是<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;
		}
		//把處理后的商品信息存儲到localStorage
		localStorage.setItem(data, JSON.stringify(films));
		//重新加載并刷新頁面中的collect
		document.getElementsByClassName("dropdown")[0].innerHTML=loadCollect();
	}
}

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

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

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

5。其實(shí)在這里，這個拖拽的功能就相當(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)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！