html5 拖拽
2016-04-29 17:02
656 查看
若实现拖拽(火狐以外),被拖拽元素需添加属性:draggable
draggable是一个枚举属性,用于指定一个标签是否可以被拖拽。有以下四种取值:
例一:(除火狐以外的现代浏览器中均可以拖拽)
[html] view
plain copy
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {padding:0;margin:0}
#oDiv1 { width:100px;height:100px;background-color:#c50000}
#oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}
</style>
</head>
<body>
<div id="oDiv1" draggable="true"></div>
</body>
</html>
若想火狐下也同样实现拖拽,需要设置dataTransfer对象的setData()方法:
例二:(现代浏览器中均可以拖拽)
[html] view
plain copy
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {padding:0;margin:0}
#oDiv1 { width:100px;height:100px;background-color:#c50000}
#oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}
</style>
</head>
<body>
<div id="oDiv1" draggable="true"></div>
<div id="oDiv2"></div>
<script>
var oDiv1 = document.getElementById("oDiv1");
var oDiv2 = document.getElementById("oDiv2");
oDiv1.ondragstart = function (e) {
var e = e || window.event;
e.dataTransfer.setData(" ", " "); //这里的两个参数均包含一个空格,后面会介绍dataTransfer
}
</script>
</body>
</html>
事件:
【被拖拽元素】
【目标元素】
整个拖拽过程事件顺序:
ondragstart — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend
注:1. 若想触发ondrop事件,ondragover 中需要阻止默认事件(元素默认是不允许放置的)。
2. 在Firefox 3.5+中,如果是把图像拖放到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL。
关于event.dataTransfer
注:只能在拖放事件的事件处理程序中访问dataTransfer对象。
保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。
关于FileReader(读取文件信息)
例:
[html] view
plain copy
var fd=new FileReader();
fd.readAsDataURL(fs[0]); //fs为event.dataTransfer.files获得的集合
fd.onLoad=function(){
alert(this.result)
}
一个完整的实例(拖拽上传预览):
[html] view
plain copy
<!DOCTYPE HTML>
<html>
<head>
<style>
* { padding:0px;margin:0px;}
#oDiv1 {width:300px;height:300px;border:1px solid #000;}
</style>
</head>
<body>
<div id="oDiv1"></div>
<script>
var oDiv1 = document.getElementById("oDiv1");
var oDiv2 = document.getElementById("oDiv2");
oDiv1.ondragenter = function (ev) {
this.style.borderStyle = "dashed";
}
oDiv1.ondrop = function (ev) {
var files = ev.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function (f) {
return function () {
oDiv1.innerHTML = '<img src="' + this.result + '" title="' + f.name + '" width="100%" />';
}
})(f)
//(function(f){reader.onload = function (ev) {
// oDiv1.innerHTML = '<img src="' + ev.target.result + '" title="' + f.name + '" width="100%" height="100%" />';
//}})(f)
reader.readAsDataURL(f);
}
this.style.borderStyle = "solid";
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragover = function (ev) {
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragleave = function (ev) {
this.style.borderStyle = "solid";
}
</script>
</body>
</html>
参考:http://www.w3cmm.com/html/drag.html
原文地址:/article/8118242.html
draggable是一个枚举属性,用于指定一个标签是否可以被拖拽。有以下四种取值:
true | 表示此元素可拖拽 |
false | 表示此元素不可拖拽 |
auto | 除img和带 href的标签 a标签表示可拖拽外,其它标签均表示不可拖拽 |
其它任何值 | 表示不可拖拽 |
[html] view
plain copy
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {padding:0;margin:0}
#oDiv1 { width:100px;height:100px;background-color:#c50000}
#oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}
</style>
</head>
<body>
<div id="oDiv1" draggable="true"></div>
</body>
</html>
若想火狐下也同样实现拖拽,需要设置dataTransfer对象的setData()方法:
例二:(现代浏览器中均可以拖拽)
[html] view
plain copy
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {padding:0;margin:0}
#oDiv1 { width:100px;height:100px;background-color:#c50000}
#oDiv2 { width:200px;height:100px;background-color:#ffd800;position:absolute;top:300px;left:300px;}
</style>
</head>
<body>
<div id="oDiv1" draggable="true"></div>
<div id="oDiv2"></div>
<script>
var oDiv1 = document.getElementById("oDiv1");
var oDiv2 = document.getElementById("oDiv2");
oDiv1.ondragstart = function (e) {
var e = e || window.event;
e.dataTransfer.setData(" ", " "); //这里的两个参数均包含一个空格,后面会介绍dataTransfer
}
</script>
</body>
</html>
事件:
【被拖拽元素】
ondragstart | 拖拽前触发(鼠标按下并开始拖拽) |
ondrag | 拖拽过程中触发(连续出发,即使鼠标不移动也会连续触发) |
ondragend | 拖拽结束触发 |
ondragenter | 进入目标元素 |
ondragover | |
ondrop | 释放鼠标瞬间触发 |
ondragleave | 鼠标离开目标元素触发 |
ondragstart — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend
注:1. 若想触发ondrop事件,ondragover 中需要阻止默认事件(元素默认是不允许放置的)。
2. 在Firefox 3.5+中,如果是把图像拖放到放置目标上,页面就会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL。
关于event.dataTransfer
setData(key,value) | 两个参数都是字符串类型 |
getData(key) | getData()可以取得由setData()保存的值 |
effectAllowed | 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized) ;事件 ondragstart中设置 |
setDragImage(element, x, y) | 指定一副图像,当拖动发生时,显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中,HTML元素(可以是隐藏的元素)可以是一副图像,也可以是其它元素。是图像则显示图像,是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme |
files | 获取外部拖拽文件的一个类似数组的集合(length)。集合中每个元素有type属性,依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。 |
保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。
关于FileReader(读取文件信息)
readAsDataURL | 参数为要读取的文件对象,将文件读取为DataUrl |
onLoad | 读取成功完成时触发此事件,this.result 获取读取的文件数据,如果是图片,将返回base64格式的图片数据 |
[html] view
plain copy
var fd=new FileReader();
fd.readAsDataURL(fs[0]); //fs为event.dataTransfer.files获得的集合
fd.onLoad=function(){
alert(this.result)
}
一个完整的实例(拖拽上传预览):
[html] view
plain copy
<!DOCTYPE HTML>
<html>
<head>
<style>
* { padding:0px;margin:0px;}
#oDiv1 {width:300px;height:300px;border:1px solid #000;}
</style>
</head>
<body>
<div id="oDiv1"></div>
<script>
var oDiv1 = document.getElementById("oDiv1");
var oDiv2 = document.getElementById("oDiv2");
oDiv1.ondragenter = function (ev) {
this.style.borderStyle = "dashed";
}
oDiv1.ondrop = function (ev) {
var files = ev.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function (f) {
return function () {
oDiv1.innerHTML = '<img src="' + this.result + '" title="' + f.name + '" width="100%" />';
}
})(f)
//(function(f){reader.onload = function (ev) {
// oDiv1.innerHTML = '<img src="' + ev.target.result + '" title="' + f.name + '" width="100%" height="100%" />';
//}})(f)
reader.readAsDataURL(f);
}
this.style.borderStyle = "solid";
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragover = function (ev) {
ev.stopPropagation();
ev.preventDefault();
}
oDiv1.ondragleave = function (ev) {
this.style.borderStyle = "solid";
}
</script>
</body>
</html>
参考:http://www.w3cmm.com/html/drag.html
原文地址:/article/8118242.html
相关文章推荐
- 基于HTML5的有弹幕功能的视频播放器
- HTML5头部meta整理
- H5笔记1-本地存储localStorage
- 容联短信验证
- Zookeeper-3.4.5-cdh5.0.1 单机模式、副本模式安装、配置说明
- 每日记录 2016-4-29 HTML5本地存储
- HTML5-02 元素
- html5 原生 drag drop helloworld
- html5支持自定义标签保存值
- HTML5触摸界面的程序设计
- HTML5标签二
- OpenGL、WebGL、H5
- html5 压缩图片上传
- HTML5表单及其验证
- amr格式转换为MP3格式
- html5的常用标签
- h5布局之道(最终篇)
- html5 离线存储 worker
- Html5
- H5元素