html5 拖拽

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
      #box{
          width:200px;
          height: 200px;
          border:1px solid red;
      }
       #con{
           width:200px;
           height:200px;
           border:1px solid blueviolet;
           list-style: none;
           padding: 0;
           margin: 0;
           line-height: 30px;
           text-align: center;

       }
        li{
            width: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

 

posted @ 2017-09-11 22:50  1点  阅读(184)  评论(0)  编辑  收藏  举报