HTML5实现元素的原生拖放（drag&drop）【涉及Event对象】

最新推荐文章于 2024-06-06 15:07:55 发布

zhangmx0215

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： html5 w3c

本文链接：https://blog.youkuaiyun.com/zhangmx0215/article/details/61198690

学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中实现拖放功能的方法，并提供了一个实际的示例代码。讲解了如何设置元素可拖动、如何在目标元素上放置数据等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-在HTML5中，任何元素都可以实现拖放。
-Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。

先上代码，依然是w3c中的示例！！！

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
//【3】接下来要写各个函数啦
function allowDrop(ev)
{
ev.preventDefault();
//因为默认情况下是无法在元素中放入其他数据or元素的，所以这里要组织对象事件的默认处理方式（坑爹的是任何版本的IE浏览器event对象不支持该方法...不支持...至于遇到IE怎么办请看**脚注1**）
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖元素的数据类型和值（此处是元素的id，所以是Text类型，详情可以看**脚注2**，ev.target是指触发事件函数的元素，此处是被拖元素）
}

function drop(ev)
{
ev.preventDefault();
//获取在drag函数中存储的被拖放元素id值，存入data中，用于接下来追加至辣个框框中
var data=ev.dataTransfer.getData("Text");
//【敲黑板】这里的target就是指触发放置函数的目标元素啦（辣个框框）
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>
<!--【2】充当容器的元素也要设置将元素放置何处(ondragover，此处我觉得可以理解为，在鼠标按住元素拖动过程中触发的函数)和被放入其他元素(ondrop)时会触发的函数-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!--【1】首先，要将拖动的元素设置为可拖动，即draggable="true"
     以及开始拖动时要触发的函数ondragstart(event)记得要传入event对象-->
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

这里写图片描述

关于Event对象的详解，参见w3c的解释啦，超级详细~
链接：HTML DOM Event对象详解

另：如果要实现来回拖拽图片，就对两个容器都添加事件函数就好，嗯。

脚注1：一位网友博客中提到的解决方案【针对IE浏览器】

小小总结一下：要么在使用preventDefault函数时判断浏览器的类型，如果是IE浏览器，则使用window.event.returnValue = false;方法就好；要么就是开发人员自己改写preventDefault函数（在里面加入对浏览器类型的判断语句），这样就可以普遍使用了。我觉得对于要大量使用preventDefault函数的情况下，还是改写比较高效。
btw，今天才知道想要简单地判断一下浏览器是不是IE，用if判断一下document.all就好了，如果不是IE浏览器都会返回false，震惊…

脚注2：关于H5原生拖拽中dataTransfer对象的剖析【来自百度经验】