HTML5 DragEvent接口的实例讲解

DragEvent是一个表示drag和drop交互的DOM event接口。用户通过将指针设备(如:鼠标)放在目标的表面开始拖动,然后拖动指针到一个新的位置(如其他DOM元素)。应用程序自动的解析拖放交互。DragEvent接口从mouseEvent和Event那儿继承属性。

Event types

DragEvent并不是一个单一的事件,它包含了多个事件,这些事件分别是:drag,dragstart,dragenter,dragend,dragover,dragexit,dragleave,drop。

drag:这个事件在元素拖拽的过程中反复触发,每一百毫秒触发一次。这事件的目标元素是被拖的那个元素,该事件可冒泡,可取消默认行为。

dragstart:这个事件在用户开始拖动时触发。这个事件的目标元素是被拖的那个元素,在这些事件中,dragstart事件最先触发。该事件可冒泡,可取消默认行为。

dragenter:这个事件在被拖的元素进入一个合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡,可取消默认行为。

dragover:当被拖的元素在可drop目标范围内移动时反复触发这个事件,一百毫秒触发一次。这个事件的目标元素是这个可drop目标。该事件可冒泡,可取消默认行为。

dragend:当拖拽结束时触发这个事件,这个事件的目标元素是被拖的元素。在这些事件中dragend最后触发。该事件可冒泡,不能取消默认行为。

dragleave:这个事件在被拖得元素离开合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡,不能取消默认行为。

dragexit:当一个可drop元素不再是拖拽操作最近的drop目标时触发这个事件。这个事件的目标元素是这个可drop元素。该事件可冒泡,不嫩取消默认行为。

drop:当在可drop目标上松开拖动元素的指针设备时触发这个事件,该事件的目标元素是这个可drop目标。drop事件在dragend事件触发之前触发。这个事件可冒泡,可取消默认行为。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </p>
    <img src="test.jpg" id="img">
    <p class="drop"></p>
    <script type="text/javascript">
        document.addEventListener('drag',function(event){
            event.target.style.backgroundColor = 'black';
        },false);
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';

        },false);
        document.addEventListener('dragend',function(event){
            event.target.style.backgroundColor = 'yellow';
        },false);
        document.addEventListener('dragover',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'blue';
        },false);
        document.addEventListener('dragenter',function(event){
            event.target.style.backgroundColor = 'green';
        },false);
        document.addEventListener('dragleave',function(event){
            event.target.style.backgroundColor = 'pink';
        },false);
        document.addEventListener('dragexit',function(event){
            event.target.style.backgroundColor = 'red'
        },false);
        document.addEventListener('drop',function(event){
            event.preventDefault();
            event.target.style.backgroundColor = 'white';
            console.log(2);


        },false)
    </script>
</body>
</html>

这些事件的事件对象包含鼠标事件的事件对象的方法与属性。之外还存在一个dataTransfer属性

让元素可拖

在HTML中默认可拖的元素只有image,link及被选择的文本。要让其他元素可拖,需要做下面这三件事:

1.给元素设置一个draggable属性,并且将这个属性的值设置为true

2.在这个元素上添加一个dragstart的事件监听

3.在dragstart的事件监听上通过event.DataTransfer.setData(type,value)设置拖拽数据。

<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
      This text <strong>may</strong> be dragged.
    </p>

如果draggable属性被禁止或者设置为false,那么这个元素不能被拖拽。draggable属性可以在任何属性上设置。当一个元素设置为可拖,在这个元素上点击或拖动鼠标,这个元素里的文本或其他元素不会被选中。当用户开始拖动,dragstart事件会被触发,在dragstart事件中,你能够通过setData()指定拖拽数据,通过setDragImage()指定图片反馈,以及通过设置effectAllowed属性和dropEffect属性指定拖拽效果。拖拽数据是必须指定的,但是图片反馈是拖拽效果不是必须的

拖拽数据

拖拽数据包含两部分信息,分别是数据的类型和数据的值,数据的类型是字符串,数据的值也是字符串形式。 拖拽数据的类型有:text/plain,text/html,image/jpeg,text/uri-list等,还能够自定义类型。

可以多次调用setData()方法设置多个拖拽数据。如下:

var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');

application/x-bookmark是自定义类型。

如果通过这个方法设置新的类型的数据,那么这个新的拖拽数据会位于拖拽数据列表的尾部,如果设置以及存在的类型的数据,那么新的数据会覆盖旧的数据。

通过getData()能够得到指定类型的拖拽数据

通过clearData()能够清除指定类型的拖拽数据

图片反馈

图片反馈并不是必须设置的,默认它是从拖拽目标上生成的一个半透明图片,并且这个图片在拖拽期间会跟着鼠标移动。你能够通过setDragImage(image,xOffect,yOffect)方法自定义图片反馈。

setDragImage()接受三个参数,第一个参数表示图片引用,第二个和第三个表示图片左上角相对于鼠标指针的位置。单位是像素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test target</title>
    <style type="text/css">
        #drag{
            width:200px;
            height:200px;
            background-color: aqua;
        }
        .drop{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
        我可以拖动
    </p>
    <img src="test.jpg" id="img">
    <p class="drop"></p>
    <script type="text/javascript">
      
        document.addEventListener('dragstart',function(event){
            event.target.style.backgroundColor = 'red';
            event.dataTransfer.setDragImage(document.getElementById('img'),30,30);

        },false);
       
    </script>
</body>
</html>

拖拽效果

通过设置effectAllowed和dropEffect可以指定拖拽效果

事件对象的dataTransfer属性

dataTransfer属性是一个DataTransfer对象,在这个属性中保存了拖拽操作过程中的数据,它可能保存一个或者多个数据项。这个属性是只读的。

dataTransfer属性中的标准属性

1.dropEffect

得到当前drag and drop操作的类型,或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none,copy,move,link。这属性会影响拖拽过程中的鼠标的显示形式。

2.effectAllowed

这个属性用于指定运行的拖拽操作效果,可选的值有none,all,copy,move,link,copyLink,copyMove,linkMove。默认情况这个值是all,如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。

3.files

包含了在data transfer中的所有可用的本地文件列表,如果被拖拽操作没有涉及文件,那么它是一个空列表。

4.items

是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。

5.types

它是一个字符串数组,这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型,如果拖拽操作不存在数据,那么他得到一个空数组。

DataTransfer属性的标准方法

1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数,如果这个参数是空或者没有指定,那么移除所以类型的数据,如果指定的类型不存在或者data transfer中不包含数据,那么这个方法不会产生什么影响。

2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据, 得到一个空的字符串。

3.setData(type,value):设置给定类型的拖拽数据。接受两个参数,第一个参数是类型,第二个参数是指定类型的值。 如果这个类型的值不存在,那么在类型列表的最后添加一个新的格式,如果已经存在的,那么在相同的位置 存在的数据被替换.

4.setDragImage(image,xoffset,yoffset):接受三个参数,第一个参数是图片的引用,第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。

DataTransferList对象

通过dataTransfer.items得到的值就是DataTransferList对象。

DataTransferList对象的属性

1.length:得到拖拽数据的数量

DataTransferList对象的方法

1.add():向拖拽数据列表中添加一个新的拖拽数据,添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中,这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中,这个方法接受两个参数,第一个参数是数据,第二个参数是类型。

2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数,如果这个参数小于0或者大于拖拽数据列表的长度,拖拽数据列表不会发生改变。

3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。

4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数, 这个方法简写形式是数组索引。

DataTransferItem对象

dataTransfer.items中的每一项都是DataTransferItem对象。

DataTransferItem对象的属性

1.kind:得到拖拽数据的键,可能的值有file和string

2.type:得到拖拽数据的类型,是MINE type

DataTransferItem对象的方法

1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null

2.getAsString(function):调用回调函数,这个回调函数将拖拽数据项的字符串形式作为它的参数

拖拽文件

要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop,dragover和dragend事件处理程序。

当为一个元素添加drop事件的处理程序,及在dragover事件处理程序中取消浏览器的默认行为,那么这个元素就是放置区域。

另外,在drag和drop操作结束之后,应用程序应该移除拖拽数据(可能是一个或者多个文件),数据的清理通常在 dragend事件处理程序中。

<p id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">
  <strong><Drag one or more files to this Drop Zone ...</strong>
</p>

例子一,访问文件名

function drop_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  // If dropped items aren't files, reject them
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i=0; i < dt.items.length; i++) {
      if (dt.items[i].kind == "file") {
        var f = dt.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + f.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i=0; i < dt.files.length; i++) {
      console.log("... file[" + i + "].name = " + dt.files[i].name);
    }
  }
}

例子二,阻止浏览器默认行为

function dragover_handler(ev) {
  console.log("dragOver");
  // Prevent default select and drag behavior
  ev.preventDefault();
}

例子三,清除数据

function dragend_handler(ev) {
  console.log("dragEnd");
  // Remove all of the drag data
  var dt = ev.dataTransfer;
  if (dt.items) {
    // Use DataTransferItemList interface to remove the drag data
    for (var i = 0; i < dt.items.length; i++) {
      dt.items.remove(i);
    }
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

【相关推荐】

1. 免费h5在线视频教程

2. 20分钟看懂html5 看看H5都有啥新特性

3. 教你如何实现一个H5微场景

4. H5制作一个注册页面的代码实例

5. H5与传统html的区别

6. 通过H5实现拍照功能的实例详解

以上就是HTML5 DragEvent接口的实例讲解的详细内容,更多请关注其它相关文章!

  • HTML5 ,DragEvent
    • 总结HTML5中的标签
    • 解析HTML5 geolocation的实例教程