HTML5 拖放LOGIN

HTML5 拖放

HTML5 拖放

拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.

相关实例:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5 drag &amp; drop 拖拽与拖放测试</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
<body>
<div class="dustbin"><br>垃<br>圾<br>箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
    <div class="draglist" title="拖拽我" draggable="true">列表2</div>
    <div class="draglist" title="拖拽我" draggable="true">列表3</div>
    <div class="draglist" title="拖拽我" draggable="true">列表4</div>
    <div class="draglist" title="拖拽我" draggable="true">列表5</div>
    <div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11205167-1']);
  _gaq.push(['_trackPageview']);
  (function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

<img draggable="true">

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

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

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

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

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

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

代码解释:

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

相关知识点总结:

DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer。

draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:

<div title="拖拽我" draggable="true">列表1</div>

ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上

ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上

ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上

ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上

ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上

Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

Event.effectAllowed 属性:就是拖拽的效果。


nächsten Abschnitt
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>html5 drag & drop 拖拽与拖放测试</title> <style> body{font-size:84%;} .dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微软雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;} .dragbox{width:500px; padding-left:20px; float:left;} .draglist{padding:10px; margin-bottom:5px; border:2px dashed #ccc; background-color:#eee; cursor:move;} .draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;} .dragremind{padding-top:2em; clear:both;} </style> </head> <body> <div class="dustbin"><br>垃<br>圾<br>箱</div> <div class="dragbox"> <div class="draglist" title="拖拽我" draggable="true">列表1</div> <div class="draglist" title="拖拽我" draggable="true">列表2</div> <div class="draglist" title="拖拽我" draggable="true">列表3</div> <div class="draglist" title="拖拽我" draggable="true">列表4</div> <div class="draglist" title="拖拽我" draggable="true">列表5</div> <div class="draglist" title="拖拽我" draggable="true">列表6</div> </div> <div class="dragremind"></div> <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script> var $ = function(selector) { if (!selector) { return []; } var arrEle = []; if (document.querySelectorAll) { arrEle = document.querySelectorAll(selector); } else { var oAll = document.getElementsByTagName("div"), lAll = oAll.length; if (lAll) { var i = 0; for (i; i<lAll; i+=1) { if (/^\./.test(selector)) { if (oAll[i].className === selector.replace(".", "")) { arrEle.push(oAll[i]); } } else if(/^#/.test(selector)) { if (oAll[i].id === selector.replace("#", "")) { arrEle.push(oAll[i]); } } } } } return arrEle; }; var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null; for (var i=0; i<lDrags; i+=1) { eleDrags[i].onselectstart = function() { return false; }; eleDrags[i].ondragstart = function(ev) { ev.dataTransfer.effectAllowed = "move"; ev.dataTransfer.setData("text", ev.target.innerHTML); ev.dataTransfer.setDragImage(ev.target, 0, 0); eleDrag = ev.target; return true; }; eleDrags[i].ondragend = function(ev) { ev.dataTransfer.clearData("text"); eleDrag = null; return false }; } eleDustbin.ondragover = function(ev) { ev.preventDefault(); return true; }; eleDustbin.ondragenter = function(ev) { this.style.color = "#ffffff"; return true; }; eleDustbin.ondrop = function(ev) { if (eleDrag) { eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔进了垃圾箱'; eleDrag.parentNode.removeChild(eleDrag); } this.style.color = "#000000"; return false; }; </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>
einreichenCode zurücksetzen
KapitelKursunterlagen