js实现本地图片文件拖拽效果

如何拖拽图片到指定位置，具体方法如下

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上js代码

完整代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title>  <style>   #dropBox{    width: 300px;    height: 300px;    border:1px solid red;    font-size: 40px;    text-align: center;    background: lightyellow;    background-repeat: no-repeat;    background-size: 100%;   }   #dropBox div{    margin:50px auto;    width: 140px;   }  </style> </head> <body>  <div id="dropBox">   <div>拖动你的图片到这里</div>  </div>  <script type="text/javascript">   var dropBox;   window.onload=function(){    dropBox = document.getElementById("dropBox");    // 鼠标进入放置区时    dropBox.ondragenter = ignoreDrag;    // 拖动文件的鼠标指针位置放置区之上时发生    dropBox.ondragover = ignoreDrag;    dropBox.ondrop = drop;   }   function ignoreDrag(e){    // 确保其他元素不会取得该事件    e.stopPropagation();    e.preventDefault();   }   function drop(e){    e.stopPropagation();    e.preventDefault();       // 取得拖放进来的文件    var data = e.dataTransfer;    var files = data.files;    // 将其传给真正的处理文件的函数          var file = files[0];    var reader = new FileReader();    reader.onload=function(e){     dropBox.style.backgroundImage = "url('"+e.target.result+"')";    }    reader.readAsDataURL(file);   }  </script> </body> </html>