HTML5实现拖拽功能步骤详解-木庄网络博客

本文摘自PHP中文网，作者零到壹度，侵删。

这篇文章主要介绍了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);   //标准写法
}