html5(拖拽1) 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
li{ margin:10px; width:100px; height:30px; list-style:none; background:yellow;}
#div1{ width:200px; height:200px; background:red; margin:200px;}
</style>
<script type="text/javascript">
 //拖放  draggable :设置为true 就可以拖放了
 //拖拽元素事件：ondragstart  拖拽前触发
             //ondrag     拖拽之间触发
             //ondragend   拖拽结束触发
window.onload=function(){
     var aLi=document.getElementsByTagName("li");
     var oDiv=document.getElementById("div1");
     var i=0;
     for(var i=0;i<aLi.length;i++)
     {
        aLi[i].ondragstart=function()//拖拽前触发
        {
           this.style.background="green";
        }
        aLi[i].ondrag=function()//开始与结束连续触发
        {
           //document.title=i++;
        }
        aLi[i].ondragend=function()//拖拽结束触发
        {
           this.style.background="yellow";
        }
     }
     //目标元素事件：
     //ondragenter  进入目标元素触发，相当于mouseover
     //ondragover   进入目标，离开目标之间，连续触发
     //ondragleave   离开目标元素触发，相当于mouseout
     //drop          在目标元素上释放鼠标触发
     
     oDiv.ondragenter=function()
     {
        this.style.background="green";
     }
     oDiv.ondragover=function(ev)//enter和leave之间触发
     {
        //document.title=i++;
        ev.preventDefault();
     }
     
     oDiv.ondragleave=function()
     {
        this.style.background="red";
     }
      oDiv.ondrop=function()
     {
        alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。
     }
     
     
     //事件执行顺序：drop不触发的时候
     //dragstart>drag>dragenter>dragover>dragleave>dragend
     //事件执行顺序： drop触发的时候（dragover的时候阻止默认事件）
     //dragstart>drag>dragenter>dragover>drop>dragend
 }
</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>

 

posted @ 2013-07-08 22:21  zhangchun  阅读(238)  评论(0)    收藏  举报