javascript实现文件拖拽事件


Posted in Javascript onMarch 29, 2018

本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下

1.效果图:

javascript实现文件拖拽事件

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
js实现数组转换成json
Jun 26 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 #Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
vue axios请求拦截实例代码
Mar 29 #Javascript
You might like
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php递归函数怎么用才有效
2018/02/24 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
JS中call和apply函数用法实例分析
2018/06/20 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
python使用Matplotlib画饼图
2018/09/25 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Python笔记之facade模式
2019/11/20 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
物业电工岗位职责
2013/11/20 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android