html5 拖放---(二)转

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

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

事件:

【被拖拽元素】

 

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对象。

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

关于FileReader(读取文件信息)

 

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

 

例:

var fd=new FileReader(); fd.readAsDataURL(fs[0]);  //fs为event.dataTransfer.files获得的集合 

fd.onLoad=function(){ alert(this.result) } 

一个完整的实例(拖拽上传预览):

<html>

<head>

    <title></title>

    <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>  
View Code

 

 

你可能感兴趣的:(html5)