这篇文章给大家分享的是有关HTML5实现拖拽功能的方式的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联专注于企业全网整合营销推广、网站重做改版、峨眉山网站定制设计、自适应品牌网站建设、H5建站、电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为峨眉山等各大城市提供网站开发制作服务。问题:突然奇想,想在电影网上加一个收藏(类似于购物车的东西),可以通过拖拽图片进行添加
前提:需要了解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我这里的代码就是获取所选要拖拽图片的父元素,然后进行遍历,将每一个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"表示目标对是元素 //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读取数据 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。其实在这里,这个拖拽的功能就相当于是实现了
感谢各位的阅读!关于HTML5实现拖拽功能的方式就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网页题目:HTML5实现拖拽功能的方式-创新互联
标题路径:http://www.cdkjz.cn/article/ccdjgh.html