html5---拖拽列表

浏览数：30 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html5---拖拽列表