主要还是对
draggable的练习，因为之前遇到了点小问题，所以今天才整理，对
draggable不太了解的请点击深入理解
js中的
draggable，该有的解释已经在注释中了，所以此处不再过多解释，嗯、直接上代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{padding:0px; margin:0px;}
ul{width:1000px; margin:30px auto;}
li{list-style:none; width:100px; height:60px; background:yellow; margin:20px; float:left;}
li img{width:100px; height:60px;}
#div1{ width:200px; height:200px;text-align:center; line-height:200px; background:red; position:absolute; top:400px; left:300px;}
#rem{width:50px; height:50px; color:#fff; background:#000; font-size:10px; text-align:center; line-height:50px; border:1px solid #000; border-radius:50%; position:fixed; bottom:20px; left:20px;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var oDiv = document.getElementById('div1');
var oRe = document.getElementById('rem');
var len = 0;
oDiv.ondragenter = function(){
this.style.background = 'green';
this.innerHTML = '可以释放啦';
}
oDiv.ondragover = function(ev){
ev.preventDefault();
}
oDiv.ondragleave = function(){
this.style.background = 'red';
this.innerHTML = '将文件拖拽到此区域'
}
oDiv.ondrop = function(ev){
var ev = ev||event;
ev.preventDefault();
var fs = ev.dataTransfer.files;//files获取外部拖拽的文件，返回一个filesList列表
for(var i=0; i<fs.length; i++){
if(fs[i].type.indexOf('image')!=-1){
var fd = new FileReader();
fd.readAsDataURL(fs[i]);//参数为要读取的文件对象，将文件读取为DataUrl
fd.οnlοad= function(){//当读取文件成功完成的时候触发此事件
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;//this.result，获取读取的文件数据
oLi.appendChild(oImg);
oUl.appendChild(oLi);
var aLi = oUl.getElementsByTagName('li');
len = aLi.length;
for(var i=0; i<len;i++){
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
var ev = ev||event;
ev.dataTransfer.setData('name',this.index);
this.style.background = 'blue';
};
}
oRe.ondragover = function(ev){
var ev = ev||event;
ev.preventDefault();
}
oRe.ondrop = function(ev){
var ev = ev||event;
ev.preventDefault();
//console.log(ev.dataTransfer.getData('name'));
oUl.removeChild(aLi[ev.dataTransfer.getData('name')]);
for(var i=0; i<aLi.length; i++){
aLi[i].index = i;
}
}
}
}else{
alert('亲，请上传图片类型');
}
}
this.innerHTML = '将文件拖拽到此处';
this.style.background= 'red';
}
};
</script>
</head>
<body>
<ul id="ul1">
</ul>
<div id="div1">将文件拖到此区域
</div>
<div id="rem">删除图片</div>
</body>
</html>
