html5(拖拽2) 

<!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">
 //解决火狐下的问题
 //必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签。
 
 //dataTransfer对象的方法：
    //setData();设置数据key和value(必须是字符串)
    //getData() :获取数据，根据key值，获取对应的Valu 
    //setDragImage:  三个参数：指定的元素，坐标X,坐标Y
//dataTransfer对象的属性：
    //effectAllowed:  设置光标样式(none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)
    
    //files  获取外部拖拽的文件，返回一个fileList列表，fileList下有个type属性，返回文件的类型
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].index=i;
        aLi[i].ondragstart=function(ev)//拖拽前触发
        {
           var ev=ev || window.event;
           //ev.dataTransfer.setData('name','hello');
           ev.dataTransfer.setData('name',this.index)
           ev.dataTransfer.effectAllowed="copy";
            ev.dataTransfer.setDragImage(oDiv,50,50)
           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="green";
     }
     oDiv.ondragover=function(ev)//enter和leave之间触发
     {
        //document.title=i++;
        ev.preventDefault();
     }
     
     oDiv.ondragleave=function()
     {
        this.style.background="red";
     }
      oDiv.ondrop=function(ev)
     {
        
        //alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。
        alert(ev.dataTransfer.getData("name"));
     }
 }
</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:23  zhangchun  阅读(258)  评论(0)    收藏  举报