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

HTML5笔记三：拖放

2016-07-18 17:06 162 查看

1.兼容火狐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
/*拖放事件
解决火狐下的问题
必须设置dataTransfer对象才可以拖拽除图片外的其他标签

dataTransfer对象
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
*/
window.onload = function() {
var oUl = document.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var i = 0;
for(var i = 0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].ondragstart = function(ev){
var ev = ev || window.event;
ev.dataTransfer.setData('name',this.index);
this.style.background = 'green';
}
}
oDiv.ondragend = function(){
this.style.background = 'yellow';
}
oDiv.ondragenter = function(){
this.style.background = 'blue';
}
oDiv.ondragover = function(ev) {

//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title = i++;
ev.preventDefault();
}
oDiv.ondragleave = function(){
this.style.background = 'red';

}
oDiv.ondrop = function(ev){
oUl.removeChild(oLi[ev.dataTransfer.getData('name')]);
for(var i = 0; i<oLi.length; i++){
oLi[i].index = i;
}
}

}
</script>
</head>

<body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航