HTML5 拖放

本节我们学习 html5 中的拖放，拖放是一种常见的特性，也就是抓取对象以后拖到另一个位置。在 html5 中，拖放是标准的一部分，任何元素都能够拖放。


拖放事件

拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。

被拖动元素的相关事件如下所示：

事件描述
ondragstart用户开始拖动元素时触发
ondrag元素正在拖动时触发
ondragend用户完成元素拖动后触发

容器相关事件如下所示：

事件描述
ondragenter当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover当被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop在一个拖动过程中，释放鼠标键时触发此事件


如何实现元素的拖放

我们通过上述的拖放事件来实现将下图“你好，侠课岛”，拖放到上面的矩形框中的演示效果： HTML5 拖放

首先创建一个HTML文本，用于测试代码，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div class="div1" id="div1" ></div>
<p id="drag1">你好，侠课岛！</p>
</div>
</body>
</html>

然后，我们要给被拖动元素（也就是在上述的 <p> 标签上），设置一个 draggable 属性，此属性用于规定元素是否可拖动，当属性值为 true 时表示元素可拖动，为 false 表示元素不可拖动。

<p id="drag1" draggable="true">你好，侠课岛！</p>

只有设置了 draggable 属性值为 true ，指定元素才能被拖动。

然后，我们要做的是点击被拖动元素 “你好，侠课岛！”，点击这个元素时需要触发一个 ondragstart 事件，ondragstart 事件会在用户开始拖动元素或选择的文本时触发。调用了一个 drag(event) 函数，在这个函数中规定被拖动的数据，如下所示：

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

代码中的 dataTransfer.setData() 方法用于设置被拖数据的数据类型和值。参数 Text 表示被拖动数据的数据类型，参数 e.target.id 是可拖动元素的 id。

接着，我们将要 “你好，侠课岛！” 拖动到元素容器范围内（矩形框中）。要实现这个步骤，需要在放置拖动元素的容器上绑定一个 ondragover 事件，这个事件用于规定在何处放置被拖动的数据。

默认情况下，是无法将一格元素放置到另外一个元素里面的，所以如果需要设置允许放置，则要在 ondragover 事件中加上 e.preventDefault() 方法来阻止默认行为。

function allowDrop(e){
e.preventDefault();
}

最后，就是要放置被拖动元素，也就是要在元素容器范围内松开鼠标。需要在元素容器上绑定一个 ondrop 事件，如下所示，这个事件会在拖动过程中释放鼠标键时触发。

<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<script>
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>

在 ondrop 事件中同样需要调用 e.preventDefault() 方法来阻止默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息，也就是被拖动元素的 id。接着通过 target.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中，这样就能成功实现拖放。


完整代码

完整代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
<style type="text/css">
.div1{
width:200px;
height:100px;
padding:20px;
border:1px solid #000;
}
p{
font-size: 28px;
}
</style>
</head>
<body>
<div>
<div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<p id="drag1" draggable="true" ondragstart="drag(event)">你好，侠课岛！</p>
</div>
<script>
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e){
e.preventDefault();
}
function drop(e){
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>


总结

当我们要对某个元素实行拖放操作时，首先就需将这个元素的 draggable 属性设置为 true，表示允许元素拖动。其中图片和链接默认是可拖动的，不需设置要 draggable 属性。

链接：https://www.9xkd.com/


站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9580

以上是 HTML5 拖放 的全部内容， 来源链接： utcz.com/a/55580.html

回到顶部