<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords"content=""/>
<meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
<meta name="author" content="网页作者的资料">
<meta name="robots" content="" />
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
#box{
width:200px;height:200px;border:1px solid red;
}
#con{
width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0;
}
li{
width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;
list-style:none;
}
</style>
<script>
window.onload=function () {
var box=document.getElementById("box");
var con=document.getElementById("con");
var lis=document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].draggable=true;
lis[i].flag=false;
lis[i].ondragstart=function () {
this.flag=true;
}
lis[i].ondragend=function () {
this.flag=false;
}
}
box.ondragenter=function (e) {
e.preventDefault();
}
box.ondragover=function (e) {
e.preventDefault();
}
box.ondragleave=function (e) {
e.preventDefault();
}
box.ondrop=function (e) {
for (var i=0; i<lis.length; i++) {
if(lis[i].flag){
box.appendChild(lis[i]);
}
}
e.preventDefault();
}
con.ondragenter=function (e) {
e.preventDefault();
}
con.ondragover=function (e) {
e.preventDefault();
}
con.ondragleave=function (e) {
e.preventDefault();
}
con.ondrop=function (e) {
for (var i=0; i<lis.length; i++) {
if(lis[i].flag){
con.appendChild(lis[i]);
}
}
e.preventDefault();
}
}
</script>
</head>
<body>
<div id="box">
</div>
<ul id="con">
<li>1号</li>
<li>2号</li>
<li>3号</li>
<li>4号</li>
</ul>
</body>
</html>
原文地址：http://blog.csdn.net/sjtu_chenchen/article/details/45649103
