HTML5之拖拽
HTML5拖放
拖放（Drag和drop）是H5标准的组成部分
此处需具备js基础知识及其H5拖拽部分相关方法
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
下面来看几个例子
第一：本地拖放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#boxContainer{
background-color: #BC8F8F;
width: 600px;
height: 400px;
}
</style>
<body>
<div id="boxContainer"></div>
<div id="msg"></div>
<script>
var imgContainer,msgDiv;
window.onload=function(){
imgContainer=document.getElementById("boxContainer");
msgDiv=document.getElementById("msg");
imgContainer.ondragover=function(e){
e.preventDefault();//阻止事件event默认行为
};
imgContainer.ondrop=function(e){//通过showObj函数显示信息知道本地图片拖拽与file信息有关
e.preventDefault();
var f=e.dataTransfer.files[0];//获取信息
var fileReader=new FileReader();//读取信息
fileReader.onload=function(e){//通过fileReader监听事件
showObj(e.target);
imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
};
fileReader.readAsDataURL(f);//读取地址
}
};
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
var s="";//声明局部变量
for(var k in obj){//用forin循环遍历数据信息
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;//显示信息在HTML
}
</script>
</body>
</html>
第二：H5拖放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.box{
width:400px;
height:300px;
}
#box1{
float: left;
background-color: orange;
}
#box2{
float: left;
background-color: rosybrown;
}
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="data:images/demo.jpg" width="200" height="200"/>
<div id="msg"></div>
<script>
var box1Div,box2Div,msgDiv,img1;//声明全局变量
window.onload=function(){
box1Div=document.getElementById("box1");//获取放置拖拽元素的div
box2Div=document.getElementById("box2");
msgDiv=document.getElementById("msg");//获取显示拖拽信息的元素的div
img1=document.getElementById("img1"); box1Div.ondragenter=function(e){//给其添加ondragenter即当被鼠标拖动的对象进入其容器范围内时触发此事件，即给拖拽加监听事件 showObj(e);//e为event事件为事件参数 }
box1Div.ondragover=function(e){
e.preventDefault();//阻止事件event默认行为
};
box2Div.ondragover=function(e){//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
e.preventDefault();//阻止事件event默认行为，调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
};
img1.ondragstart=function(e){//ondragstart - 用户开始拖动元素时触发
e.dataTransfer.setData("imgId","img1");//用setData方法获取数据
};
box1Div.ondrop=dropImghand;
box2Div.ondrop=dropImghand;//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
};
function dropImghand(e){//box1Div.ondrop=后拿出来设置函数名，即封装成方法，再在上面引用
showObj(e.dataTransfer);
e.preventDefault();//阻止事件event默认行为
//创建节点，放置数据
var img=document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);//添加到节点当中
}
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
var s="";//声明局部变量
for(var k in obj){//用forin循环遍历数据信息
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML=s;//显示信息在HTML
} </script>
</body>
</html>
HTML5之拖拽的更多相关文章
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- HTML5文件拖拽
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...
- HTML5 实现拖拽
如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...
- html5实现拖拽文件上传
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- MySql 时间处理
纸上得来终觉浅,绝知此事要躬行 博客园 首页 新闻 新随笔 联系 管理 随笔- 490 文章- 0 评论- 65 MySql 时间处理 这里是一个使用日期函数的例子.下面的查询选择了所有记录,其 ...
- Effective C++(20) 继承与面向对象设计
本文主要参考<Effective C++ 3rd>中的第六章部分章节的内容. 关注的问题集中在继承.派生.virtual函数等.如: virtual? non-virtual? pure ...
- 【Git】创建一个空分支
1 创建一个分支 使用参数 --orphan,这个参数的主要作用有两个,一个是拷贝当前所在分支的所有文件,另一个是没有父结点,可以理解为没有历史记录,是一个完全独立背景干净的分支. 参考git的帮助文 ...
- WORD列表缩进的文本起始点
Figure 1 Figure 2 Figure 3 编号位置以刻度尺为起点0.74厘米(2个字符间距),文本缩进以刻度尺为起点2.96厘米(8个字符间距) 以上两者相减得到的值正好=特殊格式悬挂缩进 ...
- 沉淀再出发：xml的意义和存在的价值
沉淀再出发:xml的意义和存在的价值 一.前言 学习了那么多的语言.框架.语法和基础知识,我们对于数据的理解或许有了一定的认识,但是如何描述.包装.传输.存储数据的手法和流程我们了解的或许并不多,其中 ...
- 沉淀，再出发：python爬虫的再次思考
沉淀,再出发:python爬虫的再次思考 一.前言 之前笔者就写过python爬虫的相关文档,不过当时因为知识所限,理解和掌握的东西都非常的少,并且使用更多的是python2.x的版本的功能,现 ...
- Spark 2.x 中 Sort-Based Shuffle 产生的内幕
本课主题 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...
- EXP-00032: Non-DBAs may not export other users
Connected to: Oracle Database 10g Enterprise Edition Release 10.2.0.4.0 - 64bit ProductionWith the P ...
- Windows和Linux环境，网络异常模拟测试方法【转载自光荣之路微信公众号】
1.网络异常的分类 在系统的运行过程中,可能会遇到各种各样的网络问题,其中主要可能出现的问题有 网络延迟:当网络信息流过大时,可能导致设备反应缓慢,造成数据传输延迟: 网路掉包:网路掉包是在数据传输的 ...
- Eclipse导入web项目发布项目时报Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web错误解决方案
Eclipse导入web项目后,将web项目加载到server进行发布时,提示Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java ...