html5 拖拽一

最新推荐文章于 2024-01-16 21:39:28 发布

hdchangchang

最新推荐文章于 2024-01-16 21:39:28 发布

阅读量8k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/hdchangchang/article/details/17753623

版权

html5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

若实现拖拽，被拖拽元素需添加属性：draggable

draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：

`true`	表示此元素可拖拽
false	表示此元素不可拖拽
`auto`	除`img`和带`href`的标签`a`标签表示可拖拽外，其它标签均表示不可拖拽
其它任何值	表示不可拖拽

例一：(除火狐以外的现代浏览器中均可以拖拽)

<!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()方法：

例二：(现代浏览器中均可以拖拽)

<!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("text", " ");   //兼容火狐，这里第一个参数是data类型，第二个是设置的数据，后面会介绍dataTransfer
        }
    </script>
</body>
</html>

事件：

【被拖拽元素】

ondragstart	拖拽前触发（鼠标按下并开始拖拽）
ondrag	拖拽过程中触发（连续出发，即使鼠标不移动也会连续触发）
ondragend	拖拽结束触发

【目标元素】

ondragenter	进入目标元素
ondragover
ondrop	释放鼠标瞬间触发
ondragleave	鼠标离开目标元素触发

整个拖拽过程事件顺序：

ondragstart — ondrag — ondragenter — ondragover — ondragleave/ondrop — ondragend

注：1. 若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。

以上是同一个页面中的元素之间的拖拽。

如何拖拽浏览器之外文件到页面？比如邮箱的拖拽上传功能。

大多浏览器中把图像、text文件拖放到放置目标上，页面就会转向图像文件或text文件；有的当前窗口打开，有的新窗口打开。

因此，为了让浏览器支持正常的拖放，还要在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对象。

保存在dataTransfer对象中的数据只能在【目标元素】事件处理程序中读取。

关于FileReader（读取文件信息）

readAsDataURL	参数为要读取的文件对象，将文件读取为DataUrl
onLoad	读取成功完成时触发此事件，this.result 获取读取的文件数据，如果是图片，将返回base64格式的图片数据

例：拖拽电脑中一张图片，并添加到<body>中实现预览

    <div id="odiv2"></div>

    <script>

    	var oDiv2 = document.querySelector("#odiv2");

    	oDiv2.οndragοver=function(ev){
    		ev.preventDefault();
    	}
    	oDiv2.οndrοp=function(ev){

    		var fs = ev.dataTransfer.files;    //获取拖拽过来的文件集合
    		var fd = new FileReader();         //创建reader实例
    		fd.readAsDataURL(fs[0]);           //读取拖拽过来的第一个文件

    		fd.οnlοad=function(){
    			console.log(this.result)   //读取成功的文件数据
    			var oImg = document.createElement("img");
    			oImg.src = this.result; 
    			document.body.appendChild(oImg);
    		}
    		ev.preventDefault();      //阻止默认事件，防止打开拖拽过来的文件
    	}

    </script>

拖拽多个图片到浏览器页面，并预览：

<body>
	<div id="odiv2"></div>
	<script>
		var oDiv2 = document.querySelector("#odiv2");
		oDiv2.οndragοver=function(ev){
			ev.preventDefault();
		}
		oDiv2.οndrοp=function(ev){
			var fs = ev.dataTransfer.files; //获取拖拽过来的文件集合
			for(var i=0;i<fs.length;i++){
				//☆☆☆为每一张图片创建一个reader实例
				var fd = new FileReader();
				fd.readAsDataURL(fs[i]);  //读取拖拽过来的文件
				fd.οnlοad=function(){
					var oImg = document.createElement("img")
					oImg.src = this.result;
					oImg.style.cssText="width:100px"
					document.body.appendChild(oImg);
				}
			}
			ev.preventDefault(); //阻止默认事件，防止打开拖拽过来的文件
		}
	</script>
</body>

参考：http://www.w3cmm.com/html/drag.html