您的位置：首页 > Web前端 > HTML5

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

2017-03-10 16:00 1231 查看
-在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对象的剖析【来自百度经验】
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 w3c
相关文章推荐
新的分享
章节导航