如何使用HTML5实现拖拽功能
这篇文章给大家分享的是有关如何使用HTML5实现拖拽功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联建站专注于网站建设，为客户提供成都做网站、网站设计、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，成都品牌网站建设，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。
问题：突然奇想，想在电影网上加一个收藏（类似于购物车的东西），可以通过拖拽图片进行添加
前提：需要了解HTML5中国LoaclStrorage（当然，其他的web存储也行，我用的是LocalStroage）
解决：这里主要重点强调关于进行拖拽功能的细节，具体html和css就自己慢慢弄吧
首先这里先是对收藏按钮进行点击显示新的p框（存放收藏的电影），二次点击隐藏p框，这里不做过多介绍
为可以进行拖拽的图片进行设置属性：draggable属性和ondragstart事件
varpic_list=document.getElementsByClassName("middle_content")[0];
varpic_list_li=pic_list.getElementsByTagName("li");
for(vari=0;i varimage=pic_list_li[i].getElementsByTagName("img")[0]; image.setAttribute("draggable",true); image.ondragstart=drag; 我这里的代码就是获取所选要拖拽图片的父元素，然后进行遍历，将每一个img都设置属性和事件 3.分别编写进行拖拽时的函数和拖拽完成的函数 //设置拖拽效果 functiondrag(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，当然还有其他的属性值，这里就不做进一步解释 //拖拽释放效果 functiondrop(e){ //方式拖拽事件传播 allowDrop(e); //从拖拽事件中获取数据 vardata=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"表示目标对是元素 //e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目标对象是 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读取数据 varnewFilms=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 functionreadFromStorage(key){ varjsonStr=localStorage.getItem(key); varnewFilms=JSON.parse(jsonStr); returnnewFilms; } 感谢各位的阅读！关于“如何使用HTML5实现拖拽功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！元素
网站名称：如何使用HTML5实现拖拽功能
分享地址：http://scyanting.com/article/johjpo.html
