HTML5拖拽功能实现（步骤进行）

问题：突然奇想，想在我的电影网上加一个收藏（类似于购物车的东西），可以通过拖拽图片进行添加

前提：需要了解HTML5中国Loacl Strorage（当然，其他的web存储也行，我用的是Local Stroage）

解决：这里主要重点强调关于进行拖拽功能的细节，具体html和css就自己慢慢弄吧

1. 首先这里先是对收藏按钮进行点击显示新的div框（存放收藏的电影），二次点击隐藏div框，这里不做过多介绍
2. 为可以进行拖拽的图片进行设置属性：draggable属性和ondragstart事件

var pic_list=document.getElementsByClassName("middle_content")[0];
	var pic_list_li=pic_list.getElementsByTagName("li");
	for(var i=0;i

        我这里的代码就是获取所选要拖拽图片的父元素，然后进行遍历，将每一个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);	//标准写法
}

    “copy”那就是字面意思，复制一份当然的data，当然还有其他的属性值，这里就不做进一步解释

//拖拽释放效果
function drop(e){
	//方式拖拽事件传播
	allowDrop(e);
	//从拖拽事件中获取数据
	var data=e.dataTransfer.getData("text");
	//e.target.id=="dropdown"，表示目标对象是div（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读取数据
		var newFilms=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
function readFromStorage(key){
	var jsonStr=localStorage.getItem(key);
	var newFilms=JSON.parse(jsonStr);
	return newFilms;
}

    5。其实在这里，这个拖拽的功能就相当于是实现了

    PS：但是，我在这里遇到了很多问题，而且是未解决的：

            第一，关于这个拖拽功能的实现，现在只有在Chrome浏览器中才能使用，IE，FireFox等其他浏览器竟然不能用，这个只能等过段时间再解决（在这里自己检讨，关于浏览器兼容我真的是涉及不多）

            第二，关于图片拖拽时，我想将其可以在新窗口打开的功能取消，但是貌似好像不是很成功，所有有关这个代码就不粘贴了，等我有时间再次完善这篇文章