分享更有价值
被信任是一种快乐

如何使用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实现拖拽功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

  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.par免费云主机、域名entNode.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实现拖拽功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: JavaScript闭包如何理解

这篇“JavaScript闭包如何理解”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript闭包如何理解”文章吧。闭包概念:函数执⾏…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册