HTML5实现拖拽功能步骤详解

//拖拽释放效果

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();

    }

}

//根据key读取localStorage的值并封装成JSON

function readFromStorage(key){

    var jsonStr=localStorage.getItem(key);

    var newFilms=JSON.parse(jsonStr);

    return newFilms;

}