53.一个挺有意思的api（drag）

 

 HTML

<div id="div2" ondrop="drop(event)" ondragover="allDrop(event)">
    <img id="drag1" src="img/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</div>
<div id="div1" ondrop="drop(event)" ondragover='allDrop(event)'></div>
<div draggable="true" ondragend="dragEnd(event)" id="div3"></div>

CSS

*{
     margin: 0;
     padding: 0;
}
#div1,#div2{
     width: 100px;
     height: 60px;
     border: 1px solid #333333;
     margin: 0 auto;
     margin-bottom: 20px;
}
img{
     width: 99%;
     height: 99%;
     margin-right: 10px;
}
            
#div3{
     height: 100px;
     width: 100px;
     position: fixed;
     top: 200px;
     left: 200px;
     background: #58a;
}

JS

<script type="text/javascript">
            function allDrop(ev) {
            
                ev.preventDefault();
            }
            
            function drag(ev) {
        
                ev.dataTransfer.setData("text", ev.target.id);
            }
            function dragEnd(e){
                let ele = document.getElementById(e.target.id)
                ele.style.top = e.clientY-50+'px'
                ele.style.left = e.clientX-50+'px'
                
            }
            function drop(ev) {
            
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
            }
</script>