<!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>