HTML5拖放操作API及实例

1、拖放效果

2、draggable属性

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

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

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

3、事件

拖动过程会触发很多事件,主要有下面这些:

  • dragstart:网页元素开始拖动时触发。
  • drag:被拖动的元素在拖动过程中持续触发。
  • dragenter:被拖动的元素进入目标元素时触发,应在目标元素监听该事件。
  • dragleave:被拖动的元素离开目标元素时触发,应在目标元素监听该事件。
  • dragover:被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件。
  • drap:被拖动元素或从文件系统选中的文件,拖放落下时触发。
  • dragend:网页元素拖动结束时触发。

以上这些事件都可以指定回调函数。下面就是一个回调函数的例子。

draggableElement.addEventListener('dragstart', function(e) {
    console.log('拖动开始!');
});

上面的代码在网页元素被拖动时,在控制台显示“拖动开始!”。

注:在拖动过程中,鼠标移动事件不会触发。

4、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对象允许在其上存储数据,这使得在被拖动元素与目标元素之间传送信息成为可能。

5、实例:拖动网元素

首先,获取网页元素。

var target = document.querySelector('#drop-target');
var dragElements = document.querySelectorAll('#drag-elements li');

// 追踪被拖动元素的变量
var elementDragged = null;

上面的代码在获取目标元素和可能的被拖动元素后,新建了一个变量elementDragged,用来存放实际拖动的元素。

然后,对可能的被拖动元素绑定dragstart事件和dragend事件。

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;
  });

};

接着绑定目标元素的dragover事件,主要是为了当被拖动元素进入目标元素后,改变鼠标形状。

target.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  return false;
});

最后,定义目标元素的drop事件,处理被拖动元素(从原来的位置删除)。

target.addEventListener('drop', function(e) {
  e.preventDefault(); 
  e.stopPropagation();

  this.innerHTML = "Dropped " + e.dataTransfer.getData('text');

  document.querySelector('#drag-elements').removeChild(elementDragged);

  return false;
});

6、实例:拖放文件

假定我们要从文件系统拖动一个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();

    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);
    }
});

7、参考链接

[1] Matt West, Implementing Native Drag and Drop

 

注:本文转自http://javascript.ruanyifeng.com/dom/dragndrop.html,有修改。

posted @ 2013-05-10 14:11 草根程序猿 阅读(...) 评论(...) 编辑 收藏