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

相关推荐: Git分支管理的策略是什么

这篇“Git分支管理的策略是什么”文免费云主机域名章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Git分支管理的策略是什么”文章吧。在GitHub上…