快捷導(dǎo)航

javascript實現(xiàn)文件拖拽事件

更新時間：2018年03月29日 14:38:46 作者：冷月葬殘花

這篇文章主要為大家詳細介紹了javascript實現(xiàn)文件拖拽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)文件拖拽事件的具體代碼，供大家參考，具體內(nèi)容如下

1.效果圖：

2.源碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <style type="text/css">
    #div1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drop(ev) {
      ev.preventDefault();
      console.log(ev.dataTransfer.files);
    }
  </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">將文件拖放到此處</div>

</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
拖拽

相關(guān)文章

詳解如何快速配置webpack多入口腳手架
這篇文章主要介紹了詳解如何快速配置webpack多入口腳手架，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
JavaScript 數(shù)組中插入元素的實例方法
這篇文章主要介紹了如何在 JavaScript 數(shù)組中插入元素,在本文中,我們學(xué)習(xí)了使用?splice()?方法將元素添加到數(shù)組的開始、末尾或任何位置的各種方法,需要的朋友可以參考下
2023-09-09
使用layui實現(xiàn)的左側(cè)菜單欄以及動態(tài)操作tab項方法
今天小編就為大家分享一篇使用layui實現(xiàn)的左側(cè)菜單欄以及動態(tài)操作tab項方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
Js 實現(xiàn)表格隔行換色一例
Js實現(xiàn)表格隔行換色一例，這種效果網(wǎng)上已經(jīng)有很多啦，每一種都有特色，請大家選擇使用。
2009-11-11
JS前端實現(xiàn)留言板功能的方法總結(jié)
留言板的主要使用場景是為用戶提供一個在網(wǎng)站或應(yīng)用上留言的平臺,本文主要為大家介紹了四個常見的前端實現(xiàn)留言板功能的方法,希望對大家有所幫助
2023-11-11
一文詳解JavaScript中的URL和URLSearchParams
URL，稱為統(tǒng)一資源定位器，指互聯(lián)網(wǎng)上能找到資源定位的字符串，而URLSearchParams對象是專門用于處理url網(wǎng)址信息中的查詢字符串，本文就來帶大家深入了解一下二者的使用
2023-05-05
前端調(diào)用后端接口時的超時問題解決辦法
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口時的超時問題,還詳細介紹了在Vue項目中配置axios的全局超時時間、使用遞歸和Promise.race()處理異步請求超時的最佳實踐,需要的朋友可以參考下
2024-12-12
JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
js實現(xiàn)登陸與注冊功能
這篇文章主要為大家詳細介紹了js實現(xiàn)登陸與注冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
微信小程序?qū)崙?zhàn)之自定義toast（6）
這篇文章主要為大家詳細介紹了微信小程序?qū)崙?zhàn)之自定義toast的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04