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>
巴特西

html5(拖拽1)

最新文章

热门文章
