html5拖放居中,html5实现本页面元素拖放和本地文件拖放

拖放本页面数据

.box {

width: 400px;

height: 400px;

}

#box2 {

float: left;

background-color:black;

}

#box1 {

float: left;

background-color: #cccccc;

}

var box1Div,box2Div, msgDiv, imgDiv1;

window.onload = function() {

box1Div = document.getElementById("box1");

box2Div = document.getElementById("box2");

msgDiv = document.getElementById("msg");

imgDiv1 = document.getElementById("img1");

/*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

showObj(e);

}*/

box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

e.preventDefault();

}

box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

e.preventDefault();

}

imgDiv1.ondragstart = function(e) { //当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

e.dataTransfer.setData("imgId", "img1");

}

box1Div.ondrop = dropImghandler; //被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

box2Div.ondrop = dropImghandler;

}

function dropImghandler(e) {

showObj(e.dataTransfer);

e.preventDefault();

//创建节点

var img = document.getElementById(e.dataTransfer.getData("imgId"));

e.target.appendChild(img);

}

function showObj(obj) {

var s = "";

for(var k in obj) {

s += k + ":" + obj[k] + "
";

}

msgDiv.innerHTML = s;

}

页面元素拖放效果：

html5实现本地文件拖放

拖放本地数据

#imgContainer{

background-color: #CCCCCC;

width: 500px;

height: 500px;

}

var imgContainer;

var msgDiv;

window.onload = function(){

imgContainer = document.getElementById("imgContainer");

msgDiv = document.getElementById("msg");

imgContainer.ondragover = function(e){

e.preventDefault();

}

imgContainer.ondrop = function(e){

e.preventDefault();

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

var fileReader = new FileReader();

fileReader.onload = function(e){

showObj(e.target);

imgContainer.innerHTML = ""

}

fileReader.readAsDataURL(fileObj);

}

}

function showObj(obj) {

var s = "";

for(var k in obj) {

s += k + ":" + obj[k] + "
";

}

msgDiv.innerHTML = s;

}

本地文件拖放效果：