这篇文章主要介绍了html5实现拖拽功能步骤详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题：突然奇想，想在电影网上加一个收藏（类似于购物车的东西），可以通过拖拽图片进行添加
前提：需要了解html5中国loacl strorage（当然，其他的web存储也行，我用的是local stroage）
解决：这里主要重点强调关于进行拖拽功能的细节，具体html和css就自己慢慢弄吧
首先这里先是对收藏按钮进行点击显示新的p框（存放收藏的电影），二次点击隐藏p框，这里不做过多介绍
为可以进行拖拽的图片进行设置属性：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实现拖拽功能步骤详解的详细内容。