html5拖放效果,html5之拖放效果 （drag and drop）

html部分

Insert title here

.box{

width: 300px;

height: 300px;

float: left;

}

#box1{

background-color: blue;

}

#box2{

background-color: red;

}

    

js部分

var box1,box2,img1; window.onload = function(){          box1 = document.getElementById("box1");     box2 = document.getElementById("box2");     img1 = document.getElementById("img1");          //阻止默认的事件     box1.ondragover = function(e){         e.preventDefault();     }     box2.ondragover = function(e){         e.preventDefault();     }          img1.ondragstart = function(e){         e.dataTransfer.setData("imgid","img1");              }     box1.οndrοp=droImghandler;     box2.οndrοp=droImghandler; } function droImghandler(e){     var img = document.getElementById(e.dataTransfer.getData("imgid"));     e.target.appendChild(img);      }