HTML5拖放API笔记

第5章HTML5拖放API笔记

---

5.1 HTML5新增拖放API

HTML5拖放API规定了所有元素都可以被拖放。具体来说，HTML5定义的拖放这一行为指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件，在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置，并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素，到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。整个拖放过程增强了人机交互的功能。

---

5.2 浏览器支持情况

---

5.3 HTML5 拖放 API 的应用

5.3.1 DragEvent 事件

• 拖放元素时的一系列动作 会触发相关元素的拖放事件DragEvent,该事件继承于鼠标事件MouseEvent。DragEvent 包含的常用事件类型如表5-2所示。
  

• 在读写模式下既可以写入数据进行传递也可以读取数据;在只读模式下，只允许将数据读取出来，不可以写入新的数据;在保护模式下，当前传递的数据不可以被修改或读取。

• 从用户在元素上点击鼠标左键开始拖曳行为，到将该元素放置到指定的目标区域中的
  整个拖放生命周期触发的事件按照顺序如下:
  dragstart->drag->dragenter->dragover->dragleave- >drop->dragend

5.3.2 DataTransfer 对象

• HTML5拖放API允许在拖放过程中携带一项或多项 自定义数据内容。这些数据内容可以使用拖放事件DragEvent中的datatransfer 属性进行添加和处理，该属性来源于HTML5中的DataTransfer对象，其中包含的每项数据均可有独立的数据类型。
• DataTransfer 对象的常用属性
  • dropEffect 用于获取或重置当前的拖放类型，共有4种取值。
  • effectAllowed 提供所有允许的拖放类型。
  • types 该属性返回值为字符串数组，包含了所有存入数据的类型。
  • items 该属性返回值为DataTransferItemList对象。
  • files 如果拖放的是-个或多个本地文件,该属性返回值为文件列表对象。
• DataTransfer 对象的常用方法如表 5-4 所示
  

5.3.3 拖放元素的过程

• 在HTML5页面中实现拖放的主要过程如下：
  • 为需要被拖放的元素添加draggable属性，使其允许被拖放;
  • 在被拖曳元素的ondragstart事件中初始化需要传递的数据信息;
  • 为作为放置区域的元素设置ondragover事件，取消默认操作;
  • 为作为放置区域的元素设置ondrop事件，接收并处理传递过来的数据内容。

1、设置元素可拖放状态

• 在HTMLs中规定所有元素都支持可拖放属性draggable,该属性值可以用于定义元素是否为可拖放状态。

• 当draggable属性值设置为true时表示元素为可拖放状态，设置为false表示元素不可以被拖放。.

• 例如，将一个段落元素变为可拖放状态

  <p draggable="true">
  	这是一个以被拖放的段落元素
  </p>
  

2、为被拖曳元素传递数据

• 使用ondragstart事件监听元素刚被拖动的状态，此时可以为ondragstart事件设置自定义名称的回调函数。
• 例如设置一个自定义函数drag()来处理ondragstart事件:

  <p drraggable="true" οndragstart="drag(event)">
  	这是一个可以被拖放的段落元素。
  </p>
  

  当用户开始拖动元素时，元素的ondragstart事件会被触发并调用drag()函数来传递事件参数even对象，其中event.datatranster属性用于在拖放过程中传递数据。
• DataTransfer对象的setData()方法可以用于为拖放事件添加不同类型的数据,包括纯文本、超链接、HTML代码等。其语法格式如下: dataTransfer.setData(format, data) 其中参数format用于填写数据类型，参数data用于填写需要传递的数据内容。可用于传递的常用数据类型如下
  • 纯文本类型——text/plain
  • 超链接类型——text/uri-list
  • HTML代码类型——text/html
  • 例如，在之前ondragstart事件的回调函数drag0中设置传递的数据:

    function drag(ev) {
    	ev.dataTransfer.setData("text/plain", "Hello HTML5"); //纯文本数据
    	ev.dataTransfer.setData("text/uri-list", "http://www.test.com"); //超链接数据
    	ev.dataTransfer.setData("text/html", "<h3>Hello HTML5</h3>"); //HTML 代码数据
    }
    

    其中在触发ondragstart事件时可以读写数据。在触发ondrop事件时为只读模式，可以读取数据。其余所有事件状态下均为保护模式，不可以读、写数据。
• 在event事件中的target属性表示被拖曳的元素对象，因此可以利用纯文本类型传递元素对象的id名称。仍然以ondragstart事件的回调函数dra()为例:

  function drag(ev) {
  	ev.dataTransfer.setData("text/plain", ev.target.id); //纯文本数据，用于传递元素id名称
  }
  

  这样在可放置元素的目标区域就可以使用getData()方法获取此 id名称，并且使用JavaScript中的document.getElementById0方法获得并处理被拖曳元素的对象。

3、定义可放置元素的目标区域

• 由于被拖动的元素不可以放置在未定义的区域,因此需要将指定的元素定义为可放置区域才能用于放置被拖动的元素。
• 作为可放置区域的元素必须带有ondragover事件,用于监听是否有可拖放的元素进入了目标区域。例如，将另外一个段落元素p设置为可放置区域，代码如下:

  <p οndragοver="allowDrop(event)">
  	这是一个可以放置被拖曳元素的段落区域。
  </p>
  

• 默认情况下无法将元素放置在其他元素中，因此需要在放置区域ondragover事件的回调函数中使用event.preventDefault()方法阻止默认处理。

  function allowDrop (ev) {
  	event.preventDefault(); //阻止默认处理方式
  }
  

  event.preventDefault()方法可以禁用默认处理，因此在执行该方法后指定的区域允许用于放置被拖曳的元素。

4、接收被拖曳元素的传递数据

• 当松开鼠标左键进行放置元素时，放置区域的ondrop事件被触发。此时可以使用datatransfer对象中的getData(方法获取传递的数据内容。

  <p οndragοver="allowDrop(event)” οndrοp="drop(event)">
  	这是一个可以放置被拖曳元素的段落区域。
  </p>
  

  其中回调函数drop()名称可自定义，表示当前事件触发时的处理操作。
• 由于ondrop事件的默认行为是以超链接的形式打开数据，所以同样首先需要使用eventpreventDefault()方法阻止原先的默认处理方式，然后可以在ondrop事件的回调函数中自定义需要处理的内容。例如:

  function drop(ev) {
  	event.preventDefault(); //阻止默认处理方式
  	var data = event.datatransfer.getData("text"); //获取传递的文本类型数据
  }
  

  这里数据格式如果简写为tex或url会被自动转换为text/plain类型或ext/u-is类型。如果没有找到指定的数据内容，则返回一个空字符串。

5.3.4 自定义拖放图标

使用DataTransfer 对象中的setDragImage()方法可以自定义拖曳时显示的图标。其语法格式如下:

setDragImage(image,X,y);

其中参数image表示Image对象，代表图标的来源。参数x和y分别表示图标与鼠标在水平方向和垂直方向上的距离。该方法一-般用 于ondragstart 事件的回调函数中，表示从拖动动作开始时更改拖放图标。例如:

function drag(ev) {
	var img = new Image();
	img.src = "image/star.jpg";
	ev.dataTransfer.setDragImage(img,10,10);
}

其中变量img为图片对象，指定的图片素材来源于本地的image文件夹中的star.jpg

5.3.5 自定义拖放行为

DataTransfer对象具有ffectAllowed和dropEffect属性用于规定拖放行为，当对元素进行拖放时，共有三种常见效果解释如下:

• copy——表示被拖曳的数据将从它的初始位置复制到可放置区域。
• move——表示被拖曳的数据将从它的初始位置移动到可放置区域。
• link——表示被拖曳的数据将从它的初始位置链接-一个快捷方式到可放置区域。

一般可以在ondragstart 事件被触发时通过设置effectAlllowed属性值来规定允许进行何种操作。例如:

ev.dataTransfer.effectAllowed = "move";

上述代码表示设置允许的操作为移动，effectAllowed 的属性值只能在ondragstart 事件中进行设置。.
dropEffect属性的取值会受到effectAllowed 属性取值的约束。effectAllowed与dropEffect属性取值的具体对应关系如表5-5所示。

5.3.6 本地文件的拖放

• 除了页面上自带的HTML元素外，本地文件也可以使用HTML5拖放API进行拖曳并放置到页面的指定区域中。
• 传递本地文件时无须设置传递的数据内容，直接在放置文件时使用DataTransfer对象的files属性即可获取文件列表，里面包含了所有文件。