html5新增拖拽事件

最新推荐文章于 2024-02-22 16:53:56 发布

姑娘的代码

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量717

点赞数 1

分类专栏： html5+css 文章标签： html5新增拖拽事件

本文链接：https://blog.csdn.net/irouduoduo/article/details/70639044

版权

html5+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html5新增拖拽事件案例

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用,

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

以上是html5中新增的拖拽事件

案例：如何将一张图片拖拽到一个盒子里（注意：图片拖进目标元素默认会打开链接）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
      #div1 {width:198px; height:166px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1"   οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div>
<br />
<img id="drag1" src="pic.png" draggable="true" οndragstart="drag(event)" />
</body>
</html>

还可以把事件和文档分离写到script里（获取元素，绑定事件）。