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

太过爱你忘了你带给我的痛 2021-12-14 11:27 350阅读 0赞

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

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

完整代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> 
    <div>
      56 
    </div> 
    <div>
      57 
    </div> 
    <div>
      58 
    </div> 
    <div>
      59 
    </div> 
    <div>
      60 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE html&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>html</code> 
      <code>lang</code> 
      <code>=</code> 
      <code>"en"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>head</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>meta</code> 
      <code>charset</code> 
      <code>=</code> 
      <code>"UTF-8"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>title</code> 
      <code>&gt;Document&lt;/</code> 
      <code>title</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>style</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>#dropBox{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width: 300px; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>height: 300px; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>border:1px solid red; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>font-size: 40px; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>text-align: center; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>background: lightyellow; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>background-repeat: no-repeat; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>background-size: 100%; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>#dropBox div{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>margin:50px auto; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>width: 140px; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>style</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>head</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;</code> 
      <code>body</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"dropBox"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>&gt;拖动你的图片到这里&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;</code> 
      <code>script</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text/javascript"</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>var dropBox; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>window.onload=function(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>dropBox = document.getElementById("dropBox"); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 鼠标进入放置区时 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>dropBox.ondragenter = ignoreDrag; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 拖动文件的鼠标指针位置放置区之上时发生 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>dropBox.ondragover = ignoreDrag; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>dropBox.ondrop = drop; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>function ignoreDrag(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 确保其他元素不会取得该事件 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>e.stopPropagation(); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>e.preventDefault(); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>function drop(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>e.stopPropagation(); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>e.preventDefault(); </code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 取得拖放进来的文件 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var data = e.dataTransfer; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var files = data.files; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 将其传给真正的处理文件的函数 </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var file = files[0]; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var reader = new FileReader(); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>reader.onload=function(e){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>dropBox.style.backgroundImage = "url('"+e.target.result+"')"; </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>reader.readAsDataURL(file); </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>&lt;/</code> 
      <code>script</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>body</code> 
      <code>&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/</code> 
      <code>html</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/good10000/p/10587151.html

[Link 1]: http://www.100sucai.com/tag/35/
[js]: http://www.100sucai.com/