html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5拖放DragAndDrop</title>
<style>
.box{width: 400px; height: 400px;}
#box1{float: left; background-color: #cccccc; }
#box2{float: left; background-color: aqua; }
</style>
</head>
<body>
<!-- html5拖放 -->
<div id="box1"></div>
<div id="box2"></div>
<img id="img1" src="4.jpg" alt="">
<div id="msg"></div>
<!-- 拖放本地数据 -->
    <script>
     var box1Div,box2Div,msgDiv,img1;//创建两个变量
     window.onload=function(){//加载function
            box1Div=document.getElementById("box1");//获取box div元素
            box2Div=document.getElementById("box2");
            msgDiv=document.getElementById("msg");
            img1=document.getElementById("img1");
            //监听box1div拖入事件
            // box1Div.ondragenter=function(e){
            //  showObj(e);
            // }
            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 showObj(obj){
     var s="";//创建空字符串s
     //通过foreach遍历当前是不是他对象
     for(var k in obj){
     s+=k+":"+obj[k]+"<br/>"
     }
     msgDiv.innerHTML=s;
     }
     function dropImghandler(e){
             showObj(e.dataTransfer);
             e.preventDefault();
             //获取这个节点
             var img=document.getElementById(e.dataTransfer.getData("imgId"));
             //放入到节点中
             //box1Div.appendChild(img);
             e.target.appendChild(img);//获取指定目标
            }
    </script>
</body>
</html>
css

                                
javascript

                                
提交运行