<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
li{list-style:none;width: 100px;height: 30px;background: yellow;margin: 10px;}
#div1{width: 100px;height: 100px;background: red;margin: 200px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var oDiv=document.getElementById('div1');
var i=0;
for (var i = 0; i < aLi.length; i++) {
aLi[i].index=i;
aLi[i].ondragstart=function(ev){
var ev=ev||window.event;
ev.dataTransfer.setData('name','hello');
ev.dataTransfer.effectAllowed='link';
this.style.background='green';//拖拽前触发
}
aLi[i].ondrag=function(){
document.title=i++;//开始与结束连续触发
}
aLi[i].ondragend=function(){
this.style.background='yellow';//拖拽后触发
}
}
oDiv.ondragenter=function(){
this.style.background='bule';
};
oDiv.ondragover=function(ev){
document.title=i++;
//要想触发drop事件,就必须在dragover中阻止默认事件
ev.preventDefulte();
};
oDiv.ondragleave=function(){
this.style.background='red';
};
oDiv.ondrog=function(ev){
// alert(123);
//
//alert(ev.dataTransfer.getData('name'));
//
// oUl.removeChild(aLi[ev.dataTransfer.getData('name')]);
// for (var i = 0; i < aLi.length; i++) {
// aLi[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>
<!--
拖拽事件
draggable
设置为true,元素就可以拖拽
拖拽元素事件:事件对象为被拖拽元素 此例被拖拽的元素是li
dragstart:拖拽前触发 (因为是事件,所以要加on)
dragend:拖拽后触发
drag:开始与结束连续触发
目标元素事件:事件对象为目标元素
dragenter:进入目标元素触发,相当于mouseover
dragleave:离开目标元素触发,相当于mouseout
dragover:进入目标,离开目标。连续触发
drop: 在目标元素上鼠标抬起时触发
事件执行的顺序:
drop不触发的时候:
dragstart->drag->dragenter->dragover->dragleave->dragend
drop触发的时候(dragover阻止默认事件):
dragstart->drag->dragenter->dragover->drop->dragend
解决火狐下的问题:
必须设置dataTransfer对象的setData方法拖拽除图片外的其他标签
dataTransfer对象
setData():设置key和value(必须是字符串)
getData():获取,根据key,得到相应的value
effectAllowed:设置光标的样式,当拖拽时光标的样子
setDragImage():拖拽的对象,需要三个参数,一个拖拽的对象,另外两个是拖拽时的鼠标的坐标位置
-->
HTML5拖拽
最新推荐文章于 2022-11-26 11:46:20 发布