【HTML5】拖放

最新推荐文章于 2024-04-09 17:34:36 发布

badlyForPapers

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量861

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/happyhaojie/article/details/50805887

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、相关的函数介绍

DataTransfer对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。因为是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。dataTransfer对象有两个主要的方法：getData()方法和setData()方法：从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。在拖动文本框中的文本时，浏览器会调用setData()方法，将拖动的文本以”text”格式保存在dataTransfer对象中。类似地，在拖放链接或图像时，会调用setData()方法并保存URL。然后，在这些元素被拖放到放置目标时，就可以通过getData()方法读到这些数据。当然，作为开发人员，你也可以通过dragstart事件处理程序中调用setData()，手工保存自己要传输的数据，以便将来使用。
draggable 属性：为了使元素可拖动，把 draggable 属性设置为 true ：
```
<img draggable="true" />
```
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault()方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发，因为默认是无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。在ondrop中调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

二、页面元素的拖放

其实在w3c中，拖放这块讲的特别清楚，这里稍微讲讲。

1、HTML5允许对页面元素进行拖动，只要在元素的属性中加上draggable="true"，就可以拖动了。

2、开始拖动的时候，必须记录被拖动的元素，通过在元素上注册事件ondragstart即可实现。比如规定了一个img元素可以拖动:

<span style="font-family:SimSun;"><span style="font-size:12px;"><img draggble="true" οndragstart="drag(event);">
function drag(event)
{
event.dataTransfer.setData("Text",ev.target.id);
}
</span></span>

在拖动img的时候，drag函数就会把img的id属性记录在事件中，记录值的类型是Text。

注意：此时的ev.target表示的是被拖动的元素，因为是在ondragstart事件中。

3、规定哪个元素来放置被拖动的img，比如一个div可以放置这个被拖动的img, 需要在这个div上定义一个事件:ondragover,在这个事件中，需要阻止对事件的默认处理方式：其实就是硬性的加上一句:event.preventDefault()，原因上面的部分已经解释了。

<span style="font-family:SimSun;"><span style="font-size:12px;"><div οndragοver="allowDrop(event);">
function allowDrop(event)
{
event.preventDefault();
}
</span></span>

4、接下来要把被拖动的img放在容纳该img的div中，当放置的时候，会触发ondrop事件。通过event.dataTransfer.getData("Text")来得到上面event.dataTransfer.setData("Text",ev.target.id)中img的id,通过event.target.appendChild(document.getElementById(data))来把img放到div中，注意这里event.target指的是目标元素div，不是上面的img了。
在w3c中：

<span style="font-family:SimSun;"><span style="font-size:12px;">function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}</span></span>

代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

三、完整代码：

<span style="font-family:SimSun;"><span style="font-size:12px;"><!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
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>
</head>
<body>

<div id="div1" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />

</body>
</html></span></span>