html5 拖拽

来源：互联网发布：感情炮知乎编辑：程序博客网时间：2024/06/06 17:12

若实现拖拽（火狐以外），被拖拽元素需添加属性：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(" ", " ");   //这里的两个参数均包含一个空格，后面会介绍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+ 和 Chormefiles 获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。注：只能在拖放事件的事件处理程序中访问dataTransfer对象。

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

关于FileReader（读取文件信息）

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

例：

var fd=new FileReader();fd.readAsDataURL(fs[0]);  //fs为event.dataTransfer.files获得的集合fd.onLoad=function(){   alert(this.result)}

一个完整的实例（拖拽上传预览）：

    <!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

0 0