1. 首页
  2. 文章中心
  3. HTML5 ，DragEvent

HTML5 DragEvent接口的实例讲解

124 阅读 0 评论
我是靠谱客的博主 无心芝麻，最近开发中收集的这篇文章主要介绍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 DragEvent接口的实例讲解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(82)

相关文章

H5和CSS3组合使用的实例教程
H5和CSS3组合使用的实例教程
带你认识HTML5中的WebSocket
带你认识HTML5中的WebSocket
html格式化json的实例代码
html格式化json的实例代码
总结HTML5中的标签
总结HTML5中的标签
HTML5 DragEvent接口的实例讲解
HTML5 DragEvent接口的实例讲解
解析HTML5 geolocation的实例教程
解析HTML5 geolocation的实例教程
canvas转存为图片实例教程
canvas转存为图片实例教程
分享h5 canvas圆圈进度条的实例代码
分享h5 canvas圆圈进度条的实例代码

评论列表共有 0 条评论

立即
投稿
返回
顶部