html5拖曳事件问题,H5的拖拽事件

H5的拖拽事件

*{

margin: 0;

padding: 0;

}

.box{

width: 200px;

height: 200px;

border: 2px solid gray;

display: inline-block;

}

.box img{

width: 100%;

height: 100%;

}

.userPic{

width: 200px;

height: 200px;

border: 2px solid gray;

}

.userPic img{

width: 100%;

height: 100%;

}

上传头像

//h5新增了drag相关事件

//拖拽页面上的图片

var img = document.getElementsByTagName("img")[0],

box = document.getElementsByClassName("box")[0];

//被拖拽元素上绑定dragstart事件

img.ondragstart = function(e){

//获取元素标识并放入事件对象

e.dataTransfer.setData("id", "dragObj");

};

//为容器对象绑定dragover和drop事件

box.ondragover = function(e){

//阻止默认事件

e.preventDefault();

}

box.ondrop = function(e){

//从事事件对象中获取元素标识id

var objId = e.dataTransfer.getData("id");

//将被拖拽元素移动到容器内部。

this.appendChild(document.getElementById(objId));

}

//拖拽打开外部文件

//接收容器

var userPic = document.getElementsByClassName("userPic")[0];

//给接收容器加dragover和drop事件

userPic.ondragover = function(e){

e.preventDefault();

};

userPic.ondrop = function(e){

e.preventDefault();

//获取被拖拽的文件

var file = e.dataTransfer.files[0];

//用FileReader实例来读取文件

var reader = new FileReader();

reader.readAsDataURL(file);

//读取成功吃触发reader 的load事件

reader.onload = function(){

//创建图片标签

var img = document.createElement("img");

//result属性值为接收结果

img.src = reader.result;

//取消容器中上传头像的文字

userPic.innerHTML = "";

//把img添加到userPic容器中

userPic.appendChild(img);

};

//还原border

this.style.border = "2px solid gray";

};

//当被拖拽文件进去容器中触发dragenter事件

userPic.ondragenter = function(e){

e.preventDefault();

this.style.border = "5px red dotted";

};

//当被拖拽文件离开容器中触发dragleave事件

userPic.ondragleave = function(e){

e.preventDefault();

this.style.border = "2px solid gray";

};