HTML5拖放
1.HTML5拖放：拖放（drag和drop）是HTML5标准组成部分。
2.拖动开始：ondragstart : 调用了一个函数，drag(event),它规定了被拖动的数据
3.设置拖动数据：setData():设置被拖数据的数据类型和值
4.放入位置：ondragover:事件规定在何处放置被拖动的数据
5.放置：ondrop:当放置被拖数据时，会发生drop事件
组织系统的默认操作
box1Div.ondragover=function(e){
e.preventDefault();
}
<style>
.box{
400px;
height:400px;
}
#box1{
float: left;
background-color: #2E9035;
}
#box2{
float: left;
background-color: #CC6699;
}
</style>
<script src="app.js"></script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="meinv.jpg">
<div id="msg"></div>
</body>
var box1Div,box2Div,msgDiv,img1;
window.onload=function(){
box1Div=document.getElementById("box1");
box2Div=document.getElementById("box2");
msgDiv=document.getElementById("msg");
img1=document.getElementById("img1");
//取消默认操作
box1Div.ondragover=function(e){
e.preventDefault();
}
box2Div.ondragover=function(e){
e.preventDefault();
}
//获取到数据
img1.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]+"<br/>"
}
msgDiv.innerHTML=s;
}
拖放本地数据
<style>
#imgContainer{
500px;
height: 500px;
}
</style>
<script src="app.js"></script>
</head>
<body>
<div id="imgContainer"></div>
<div id="msg"></div>
</body>
var imgContainer,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 f= e.dataTransfer.files[0];
var fileReader=new FileReader();
fileReader.onload=function(e){
imgContainer.innerHTML="<img src=""+fileReader.result+"">"
}
fileReader.readAsDataURL(f);
}
}
function showObj(obj){
var s=""
for(var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;
}
