html5之拖放详解

2016-07-11 本文已影响1257人便U_Life

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

1.drggable属性

如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<div draggable="true">Draggable Div</div>

注意：在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。

2.事件

dragstart:网页元素开始拖动时触发。
drag:被拖动的元素在拖动过程中持续触发。
dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave:被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend:网页元素拖动结束时触发。
注意：以上这些事件都可以指定回调函数。

3.dataTransfer对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。

draggableElement.addEventListener('dragstart', function(event) {       event.dataTransfer.setData('text', 'Hello World!');
});

上面代码在拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“Hello World”。当拖放结束时，可以用getData方法取出这条信息。

dataTransfer对象的属性：

**dropEffect:**拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。

effectAllowed:指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files:包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types:储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法：

**setData(format, data):**在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
**getData(format):**从dataTransfer对象取出数据。
**clearData(format):**清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
**setDragImage(imgElement, x, y):**指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

4.实例讲解

1.网页元素拖放

<!DOCTYPE html>
<html>
<head>
    <title>Video step2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style>
ul{
    min-height:100px;
    background-color:#EEE;
    margin:20px;
}
ul li{
    background-color:#CCC;
    padding:10px;
    margin-bottom:10px;
}
</style>
<body>
    <ul id="drag-elements">
        <li draggable="true">A</li>
        <li draggable="true">B</li>
        <li draggable="true">C</li>
    </ul>
    <ul id="drop-target"></ul>
<script>
    //获取目标元素
    var target = document.querySelector('#drop-target');
    //获取需要拖放的元素
    var dragElements = document.querySelectorAll('#drag-elements li');
    //临时记录被拖放的元素
    var elementDragged = null;
    //循环监听被拖放元素的开始拖放和结束拖放事件
    for (var i = 0; i < dragElements.length; i++) {
        //开始拖放事件监听
        dragElements[i].addEventListener('dragstart', function(e) {
            //设置当前拖放元素的数据参数
            e.dataTransfer.setData('text', this.innerHTML);
            //保存当前拖放对象
            elementDragged = this;
        });
        //结束拖放事件监听
        dragElements[i].addEventListener('dragend', function(e) {
            //注销当前拖放对象
            elementDragged = null;
        });
    }
    //目标元素监听被拖放元素进入事件
    target.addEventListener('dragover', function(e) {
        //阻止浏览器默认行为
        e.preventDefault();
        //设置鼠标样式
        e.dataTransfer.dropEffect = 'move';
        return false;
    });
    //目标元素监听当被拖放元素落下时刻事件
    target.addEventListener('drop', function(e) {
        //阻止默认行为
        e.preventDefault();
        //阻止默认行为
        e.stopPropagation();
        //获取当前被拖放元素的存放数据参数
        this.innerHTML = 'Dropped ' + e.dataTransfer.getData('text');
        //删除被拖放元素    
               document.querySelector('#dragelements').
               removeChild(elementDragged); 
        return false;
    });
</script>
</body>
</html>

2.拖动本地文件

假定我们要从文件系统拖动一个txt文本，在浏览器中展示内容。
首先，获取拖动的目标元素和内容展示区域。

var target = document.querySelector('#target');var contentDiv = document.querySelector('#content');

然后，定义目标元素的dragover事件，主要是为了当文件进入目标元素后，改变鼠标形状。

target.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy';});

接着，定义目标元素的drop事件，展示文件内容。

target.addEventListener('drop', function(e) { 
   e.preventDefault(); 
   e.stopPropagation(); v
   var fileList = e.dataTransfer.files; 
   if (fileList.length > 0) { 
       var file = fileList[0]; 
       var reader = new FileReader(); 
       reader.onloadend =function(e) { 
       if (e.target.readyState == FileReader.DONE) { 
        var content = reader.result; contentDiv.innerHTML = "File: " + file.name + "\n\n" + content; } } 
       reader.readAsBinaryString(file); 
      }
});

具体代码：

<!DOCTYPE html>
<html>
<head>
    <title>Video step2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style>
#target{
    margin:10px;
    min-height:100px;
    max-height:600px;
    background-color:#EEE;
    border-radius:5px;
    overflow:auto;
}
#content{
    padding:10px;
    font-size:18px;
    line-height:25px;
}
</style>
<body>
    <div id="target" title="拖动文件到这里">
    <div id="content"></div>
</div>
<script>
    //目标元素监听被拖放文件进入元素区域事件
    target.addEventListener('dragover', function(e) {
        //阻止默认行为
        e.preventDefault();
        //阻止默认行为
        e.stopPropagation();
        //改变鼠标样式
        e.dataTransfer.dropEffect = 'copy';
        return false;
    });
    //目标元素监听被拖放文件落下一刻的事件
    target.addEventListener('drop', function(e) {
        //阻止默认行为
        e.preventDefault();
        e.stopPropagation();
        
        //获取所拖放的文件
        var fileList = e.dataTransfer.files;
        
        if (fileList.length) {
            //获取第一个文件
            var file = fileList[0];
            //创建文件输入流
            var reader = new FileReader();
            //文件读取回调函数
            reader.onloadend = function(e) {
                if (e.target.readyState == FileReader.DONE) {
                    var content = reader.result;
                    contentDiv.innerHTML = 'File: ' + file.name + '\n\n' + content;
                }
            }
            //读取文件
            reader.readAsBinaryString(file);
        }
    });
</script>
</body>
</html>

谢谢观看，如有任何疑问，欢迎评论交流！