拖放的使用

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

HTML5 拖放实例

下面的例子是一个简单的拖放实例：

<style type="text/css"> 
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 

<script> 
    function allowDrop(ev){ev.preventDefault();}   
    function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);}   
    function drop(ev) { 
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    } 
</script>

  <p>拖动logo图片到矩形框中:</p>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img decoding="async" loading="lazy" id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

实例分解

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

图像、链接、文本的 draggable 属性默认为 true，其余元素的 draggable 属性默认为 false

---

被拖动元素

被拖动元素所支持的事件如下表所示

事件	含义
dragstart	准备拖动被拖动元素时触发
drag	拖动的过程中触发（频繁触发）
dragend	拖动结束时触发

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了元素被拖动时触发的事件。

---

目标元素的事件

目标元素上的事件有如下四个

事件	含义
dragenter	被拖放元素进入目标元素时触发
dragover	被拖放元素在目标元素内时触发（频繁触发）
dragleave	被拖动元素离开目标元素时触发
drop	当被拖动元素被放到了目标元素中时触发

四个事件的触发规则：

• dragenter事件与 mouseover 事件类似，那怎样才算被拖放元素进入目标元素呢？经过测试发现，当被拖放元素的一半以上面积在目标元素内才算进入了目标元素

• dragover事件比较特殊，当拖放元素进入目标元素以后就会一直触发，就跟你设置了一个无限循环的定时器一样，即使你不移动元素也会触发，除非拖放事件结束或者被拖放元素离开目标元素

• dragleave事件 的其触发条件正好与 dragenter 事件相反，它是当被拖放元素离开目标元素时触发，经过测试，离开目标元素的条件是：被拖放元素一半以上的面积离开目标元素

• drop事件 可以叫做放置目标事件，它是当被拖放元素放置到了目标元素中时触发。虽然任何元素都支持该事件，但是所有元素默认都是不允许被放置的，所以在不做任何处理的情况下，该事件是不会触发的

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

上面例子通过调用 ondragover 事件的 event.preventDefault() 方法

---

dataTransfer对象

通过 event.dataTransfer 来获取该对象，其主要的作用就是从被拖放元素向目标元素传递一个字符串数据

（1）方法

dataTransfer上有两个方法，如下表所示

setData 设置字符串，并设置数据类型，接收两个参数，第一个参数表示的是字符串的数据类型，HTML5规定了两种数据类型，分别是 text/plain 和 text/uri-list，前者表示普通字符串，后者表示URL字符串；第二个参数 就是用于存放的字符串

getData 获取对应数据类型的字符串，只接收一个参数，即需要接收的字符串类型

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了元素被拖动时触发的事件。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}

---

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

代码解释：

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

• 被拖数据是被拖元素的 id ("drag1")

• 把被拖元素追加到放置元素（目标元素）中