HTML制作拖动列表,html5---拖拽列表

无标题文档

#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;

}

window.οnlοad=function () {

var box=document.getElementById("box");

var con=document.getElementById("con");

var lis=document.getElementsByTagName("li");

for (var i=0; i

lis[i].draggable=true;

lis[i].flag=false;

lis[i].οndragstart=function () {

this.flag=true;

}

lis[i].οndragend=function () {

this.flag=false;

}

}

box.οndragenter=function (e) {

e.preventDefault();

}

box.οndragοver=function (e) {

e.preventDefault();

}

box.οndragleave=function (e) {

e.preventDefault();

}

box.οndrοp=function (e) {

for (var i=0; i

if(lis[i].flag){

box.appendChild(lis[i]);

}

}

e.preventDefault();

}

con.οndragenter=function (e) {

e.preventDefault();

}

con.οndragοver=function (e) {

e.preventDefault();

}

con.οndragleave=function (e) {

e.preventDefault();

}

con.οndrοp=function (e) {

for (var i=0; i

if(lis[i].flag){

con.appendChild(lis[i]);

}

}

e.preventDefault();

}

}

1号2号3号4号