[摘要]这篇文章主要介绍了HTML5实现拖拽功能步骤详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧问题：突然奇想，想在电影网上加一个收藏（类似于购物车的东西），可以通过拖拽...
这篇文章主要介绍了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 关键词：HTML5完成拖拽技巧步骤详细说明