html5---拖拽列表

最新推荐文章于 2024-04-09 17:34:36 发布

sjtu_chenchen

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量1.6k

点赞数 1

分类专栏： HTML5 文章标签： html5 拖拽

本文链接：https://blog.csdn.net/sjtu_chenchen/article/details/45649103

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

sjtu_chenchen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5---拖拽列表

<!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
复制链接

扫一扫

专栏目录