HTML5實現拖拽功能的方式

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

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

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

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

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

2. 為可以進行拖拽的圖片進行設置屬性：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的值并封裝成JSON
function readFromStorage(key){
	var jsonStr=localStorage.getItem(key);
	var newFilms=JSON.parse(jsonStr);
	return newFilms;
}

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

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