test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#box{
200px;
height: 200px;
border:1px solid red;
}
#con{
200px;
height:200px;
border:1px solid blueviolet;
list-style: none;
padding: 0;
margin: 0;
line-height: 30px;
text-align: center;
}
li{
150px;
height: 30px;
margin: 5px 0;
background:#ccc ;
list-style: none;
}
</style>
<script type="text/javascript" src="test1.js"></script>
</head>
<body>
<div id="box"></div>
<ul id="con">
<li>html5</li>
<li>css3</li>
<li>js</li>
<li>php</li>
</ul>
</body>
</html>
test.js
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();
}
}
效果：
2017-09-11 22:49:23