HTML5自学笔记[ 9 ]HTML5实现元素的拖放

时间：2021-09-13 13:37:43

要想在html5中实现元素的拖放，被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素，该元素是目标元素；这两个元素在拖放过程中都会触发不同的事件，处理好这些事件才可以完成漂亮的拖放。

被拖放元素触发的事件有：

  • ondragstart:该事件在鼠标按住元素开始拖动时触发。
  • ondragend:该事件在鼠标抬起时触发。
  • ondrag:该事件在dragstart和dragend之间连续触发（即使鼠标不移动）。

目标元素触发的事件有：

  • ondragenter:该事件在被拖放元素进入到目标元素时触发。
  • ondragleave:该事件在被拖放元素离开目标元素时触发。
  • ondragover:该事件在被拖放元素进入enter目标元素之后离开leave目标元素之前触发。
  • ondrop:该事件在被拖放元素进入目标元素后并抬起鼠标时触发，但是直接不会触发，而必须在阻止了ondragover的默认事件的情况下才能触发。

注意：上述属性和事件只能实现元素的拖拽，不能真正的把元素放在另一个元素里；另外即使完成了上述内容，在火狐下依然不能实现拖拽。

在火狐下使用html5实现元拖放：

  • 很简单，只要在ondragstart事件处理函数中，设置event.dataTransfer.setData(key,value);就可以了，参数key和value必须是字符串。
  • 其次，dataTransfer的属性setDragImage(oEle,x,y);可以设置拖拽时的阴影是哪个元素。
  • 最后，基本上无卵用的属性effectAllowed属性可以来设置鼠标进入目标元素后的样式。

除了页面元素的拖放外，现实中很多情况是本地文件的拖放上传，如邮箱上传附件，此时dataTransfer的强大功能就显现出来了：

  • dataTransfer的files属性是一个fileList类型的对象，它是一个类数组对象，在ondrop事件中可以获取，它的作用就是保存拖拽上来的文件。
  • 虽然files保存了文件，但是却不能将文件直接上传到服务器，此时我们就要认识一个新朋友：FileReader，这个对象的readAsDataUrl(files[i])方法可以将files中保存的文件读取为二进制形式的字符串，然后再让我们的好朋友ajax将此字符串上传给服务器就可以啦~

来个简单的小练习，外部图片拖拽到网页，显示图片：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文件拖放（仅限图片）</title>
<style>
#box { width:300px; height:300px; background:#39C; margin:100px; line-height:300px; text-align:center;}
</style>
<script>
window.onload = function(){
    var oDiv = document.getElementById('box');
    var oUl = document.getElementById('list');
    oDiv.ondragenter = function(){
        this.innerHTML = '可以松手了~';
    }
    oDiv.ondragleave = function(){
        this.innerHTML = '请将文件拖放到这个区域~';
    }
    oDiv.ondragover = function(ev){
        ev = ev || window.event;
        ev.preventDefault();
    }
    oDiv.ondrop = function(ev){
        ev = ev || window.event;
        ev.preventDefault();
        this.innerHTML = '请将文件拖放到这个区域~';    

        var files = ev.dataTransfer.files;

        for(var i=0;i<files.length;i++){
            if(files[i].type.indexOf('image')==-1){        //不是图片文件就跳过
                continue;
            }
            var fd = new FileReader();    //每次循环都要新建一个reader
            fd.readAsDataURL(files[i]);
            fd.onload = function(){
                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);
            }
        }

    }
}

</script>
</head>
<body>
    <div id="box">请将文件拖放到这个区域~</div>
    <ul id="list"></ul>
</body>
</html>

相关文章