Html5之高级-11 拖放API (拖放事件dataTransfer对象setDragImage方法)

Posted 2020-07-01

一、拖放API

WEB 拖放

    - 在桌面应用程序上，可以将元素从一个位置拖放到另一个位置，但在Web上，开发者没有一种能够实现这种操作的标准技术，从而在Web上去实现这个功能并不太容易

    - 在 html5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序

源元素事件

    - 在拖放 API 中引入了一些新的事件，其中有一些元素是由源元素(拖动的元素)触发，称之为源元素事件，另一些事件由目标元素触发(源元素投放的元素)

    - 源元素事件:

        - dragstart:当拖动操作开始，触发这个事件

        - drag: 与mousemove事件相似，它是在源元素发生拖动时触发的

        - dragend:当拖动操作结束(无论是否成功)时，源元素就会触发这个事件

目标元素事件

    - 下面是目标元素触发的事件

        - dragenter: 拖动操作过程中，当鼠标指针第一次进入目标元素区域时，就会触发整个事件

        - dragover: 当对象拖动到目标对象时触发

        - drop: 当拖动操作在目标元素内执行投放时，目标元素会触发这个事件

        - dragleave: 在拖动过程中，当被拖动对象离开目标对象时触发

                  

二、dataTransfer 对象

dataTransfer 对象概述

    - dataTransfer 对象提供了对于预定义的剪贴板格式的访问，以便在拖放中使用。它使用自定义处理拖放操作称为可能

    - 可以通过 dataTransfer 对象保存拖放过程中各组件所涉及到的数据

dataTransfer 对象获取方法

    - 在HTML5中，可以通过事件参数event对象获取 dataTransfer 对象

    - 代码如下:

      var transfer = e.dataTransfer;
      function mDragStart(event){
          dStart = document.getElementById("start");
          dStart.innerHTML = "Drag Start...";
          event.dataTransfer.setData("Text","http://www.alibaba.com");
      }

dataTransfer 对象方法

   - dataTransfer对象提供了一些方法用于在源元素与目标元素中共享数据

   - 方法

       - setData(type,data):用于声明所发送的数据与类型

       - getData(type): 返回指定type的数据

       - clearData(type):删除指定类型的数据

         type取值:

             Text: 保存普通文本

setDragImage()

   - setDragImage方法用于在拖放操作过程中，修改鼠标指针所指向的图像

   - 语法:

       event.dataTransfer.setDragImage(image,x,y);

总结：本章内容主要介绍了下 HTML5 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

本文出自 “技术交流” 博客，谢绝转载！