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的值并封装成JSONfunction readFromStorage(key){ var jsonStr=localStorage.getItem(key); var newFilms=JSON.parse(jsonStr); return newFilms;}

5。其实在这里，这个拖拽的功能就相当于是实现了

相关推荐：

原生js实现拖拽功能基本思路

如何在vue中实现拖拽功能

WPF实现拖拽功能

以上就是HTML5实现拖拽功能步骤详解的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。