08 HTML5-拖放

最新推荐文章于 2024-11-16 23:17:25 发布

鸿雁南去情难寄

最新推荐文章于 2024-11-16 23:17:25 发布

阅读量107

点赞数 2

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_42873753/article/details/84379007

版权

HTML5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

拖放

一，拖放概念

拖放（Drag和drop）是HTML5标准的组成部分。是抓取对象以后拖到另一个位置。任何元素都能够拖放。

二，拖放开始

ondragstart:调用了一个函数
drag(event):规定被拖放的数据

三，拖动数据

setDate（）：设置被拖放数据的数据类型与值

四，放入位置

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

五，放置数据

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

案例教学（本案例来自W3C网站）

<!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" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

代码解读一：

<img draggable="true" />

使元素可拖动，把 draggable 属性设置为 true

代码解读二：

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

1，dataTransfer.setData() 方法设置被拖数据的数据类型和值
2，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

代码解读三：

event.preventDefault()；

1，默认情况下，是无法将数据/元素放置到其他元素中
2，通过调用 ondragover 事件的event.preventDefault() 方法，阻止对元素的默认处理方式

代码解读四：

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

1，通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData()方法中设置为相同类型的任何数据。
2，通过appendChild()把被拖元素追加到放置元素（目标元素）中

鸿雁南去情难寄

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录