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。其實在這裡，這個拖曳的功能就相當於實作了

相關推薦：

原生思考實作拖曳功能基本想法

如何在vue中實現拖曳功能

WPF實作拖​​曳功能

以上是HTML5實作拖曳功能步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！