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。其实在这里，这个拖拽的功效就相当于是实现了

相关引荐：

原生js实现拖拽功效根本思绪

怎样在vue中实现拖拽功效

WPF实现拖拽功效

以上就是HTML5实现拖拽功效步骤详解的具体内容，更多请关注百分百源码网其它相关文章！