html5实现本页面元素拖放和本地文件拖放
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>拖放本页面数据</title>
<style>
.box {
width: 400px;
height: 400px;
} #box2 {
float: left;
background-color:black;
}
#box1 {
float: left;
background-color: #cccccc;
}
</style>
</head> <body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="img/xk.png" width="100px" height="100px" />
<div id="msg"></div>
<script>
var box1Div,box2Div, msgDiv, imgDiv1;
window.onload = function() {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
msgDiv = document.getElementById("msg");
imgDiv1 = document.getElementById("img1");
/*box1Div.ondragenter = function(e){//当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
showObj(e);
}*/
box1Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
e.preventDefault();
} box2Div.ondragover = function(e) { //拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
e.preventDefault();
} imgDiv1.ondragstart = function(e) { //当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
e.dataTransfer.setData("imgId", "img1");
} box1Div.ondrop = dropImghandler; //被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
box2Div.ondrop = dropImghandler;
} function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault(); //创建节点
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
} function showObj(obj) {
var s = "";
for(var k in obj) {
s += k + ":" + obj[k] + "<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</body> </html>
页面元素拖放效果：
html5实现本地文件拖放
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>拖放本地数据</title>
<style>
#imgContainer{
background-color: #CCCCCC;
width: 500px;
height: 500px;
}
</style>
</head> <body>
<div id="imgContainer"></div>
<div id="msg"></div>
<script>
var imgContainer;
var msgDiv;
window.onload = function(){
imgContainer = document.getElementById("imgContainer");
msgDiv = document.getElementById("msg");
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var fileObj = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e){
showObj(e.target);
imgContainer.innerHTML = "<img src='"+e.target.result+"' width='100px' height='100px' />"
}
fileReader.readAsDataURL(fileObj);
}
}
function showObj(obj) {
var s = "";
for(var k in obj) {
s += k + ":" + obj[k] + "<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</body> </html>
本地文件拖放效果：
html5实现本页面元素拖放和本地文件拖放的更多相关文章
- HTML5 增强的页面元素
一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...
- 【Egret】实现web页面操作PC端本地文件操作
Egret 实现web页面操作PC端本地文件操作: http://edn.egret.com/cn/book/page/pid/181 //------------------------------ ...
- [html5] 学习笔记-html5增强的页面元素
在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
- html5增强的页面元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 新增的页面 元素
figure 和 figcaption元素 test.html <!DOCTYPE html> <html lang="en"> <head> ...
- F12修改html进行本地js操作页面元素
F12修改html进行本地js操作页面元素
- 读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- HTML5之新增的元素
今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...
随机推荐
- Java面试人事篇（二）
1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能.最深入研究的知识领域 ...
- go-006-运算符
运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 算术运算符 下表列出了所有Go语言的算术运算符.假定 A ...
- python模块之signal信号
简介 作用:发送和接收异步系统信号 信号是一个操作系统特性,它提供了一个途径可以通知程序发生了一个事件并异步处理这个事件.信号可以由系统本身生成,也可以从一个进程发送到另一个进程. 由于信号会中断程序 ...
- docker镜像文件导入与导出，支持批量
工作中经常需要拉取一些国外的镜像,但是网络限制等原因在公司拉取很慢,所以我习惯用亚马逊服务器拉取镜像,导出后下载到本地再导入开发环境 1. 查看镜像id sudo docker images REPO ...
- HDFS的Java API
HDFS Java API 可以用于任何Java程序与HDFS交互,该API使我们能够从其他Java程序中利用到存储在HDFS中的数据,也能够使用其他非Hadoop的计算框架处理该数据 为了以编程方式 ...
- PAT 1138 Postorder Traversal [比较]
1138 Postorder Traversal (25 分) Suppose that all the keys in a binary tree are distinct positive int ...
- zwPython，字王集成式python开发平台，比pythonXY更强大、更方便。
zwPython,字王集成式python开发平台,比pythonXY更强大.更方便. 更强大,内置opencv.cuda/opencl.NLTK自然语言.pygame游戏设计等多个重量级模块库. 更方 ...
- hdu5139
这题需要我们计算 这个 因为n<10000000空间过大 那么我们可以计算出 当n可以被10整除的时候我们就将n/10记录下来当我们要查询的时候去暴力计算他们与整十之间的数去暴力去做就好了 这个 ...
- kafka环境安装
源码包下载: http://archive.apache.org/dist/kafka/1.0.0/ 集群环境: master 192.168.1.99 slave1 192.168.1.100 sl ...
- IBM究竟是一家怎样的公司
每次被问到这样的“简单”问题,我都很纠结: 这家公司,从创始至今已经积累了几十万种技术(2015年蝉联专利排行榜23年之久,仅2015年专利数7355项),开发了上万种产品(从银行的交易系统,到航空的 ...