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

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


先上代码,依然是w3c中的示例!!!


<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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<br />

<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

body>
html>

HTML5实现元素的原生拖放(drag&drop)【涉及Event对象】_第1张图片


关于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)