登录  /  注册

HTML5实现拖拽功能步骤详解

零到壹度
发布: 2018-04-03 17:45:38
原创
2584人浏览过

这篇文章主要介绍了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  alt="HTML5实现拖拽功能步骤详解" >元素
	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实现拖拽功能步骤详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号