<style>
li{
width: 100px;
height: 30px;
background: yellow;
margin: 10px;
list-style: none;
}
#div1{
width: 100px;
height: 100px;
background: red;
margin: 200px;
}
</style>
<body>
<!--
拖拽元素事件:
ondrag:开始结束连续触发
ondragstart:拖拽开始
ondragend:拖拽结束
目标元素事件:
事件对象为目标元素
ondragenter:进入目标元素触发,相对于mouseover
ondragover:进去目标、离开目标之间,连续触发
ondragleave:离开目标元素触发,相对于mouseout
ondrop:在目标元素上释放鼠标触发
-->
<ul>
<!-- 拖拽元素 -->
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
var ODiv = document.getElementById('div1');
for (var i = 0; i < lis.length; i++) {
lis[i].ondragstart = function(){
this.style.background = 'green';
}
lis[i].ondragend = function(){
this.style.background = 'yellow';
}
};
ODiv.ondragenter = function(){
this.style.background = 'blue';
}
ODiv.ondragover = function(event){
//要想触发ondrop事件就必须在ondragover中阻止默认事件
event.preventDefault();
this.style.background = 'red';
}
ODiv.ondrop = function(){
alert(123);
}
//火狐下的
for (var i = 0; i < lis.length; i++) {
lis[i].ondragstart = function(ev){
var ev = ev || window.event;
ev.dataTransfter.setData('name','heo');
this.style.background = 'green';
}
ODiv.ondrop = function(ev){
alert(ev.dataTransfter.getData('name'));
}
};
</script>
</body>