H5 拖拽功能-小demo 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5的拖拽效果实例</title>
</head>
<style>
    #box{
        height: 200px;
        width: 200px;
        border: 1px solid orange;
        float: left;
    }

    #con{
        height: 200px;
        width: 200px;
        border: 1px solid green;
        margin: 0;
        padding: 0;
        float: left;
    }
    li{
        height: 30px;
        width: 200px;
        background-color: #abcdef;
        list-style: none;
        text-align: center;
        margin: 10px 0;
    }
</style>
<body>
<div id="box"></div>
<ul id="con">
    <li>哲学</li>
    <li>汉堡包</li>
    <li>肉夹馍</li>
    <li>代码</li>
</ul>
</body>
<script>
    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; //每个li都设置可拖拽属性
        lis[i].flag = false;

        lis[i].ondragstart = function(){
            this.flag = true; //鼠标拖拽li时设置flag为true
        }
        lis[i].ondragend = function(){
            this.flag = false;
        }
    };

    box.ondragenter = function(e) {
        e.preventDefault();
    }

    box.ondragover = function(e) {
        e.preventDefault(); //阻止默认事件，否则不会触发ondrop事件
    }

    box.ondragleave = function(e) {
         e.preventDefault();
    }

    box.ondrop = function(e) {
         e.preventDefault();

        for (var i = 0; i < lis.length; i++) {
            if(lis[i].flag){ //如果flag为真，则添加一个li至box里
                box.appendChild(lis[i]);
            }
        };
    }


    con.ondragenter = function(e) {
         e.preventDefault();
    }

    con.ondragover = function(e) {
        e.preventDefault(); //阻止默认事件，否则不会触发ondrop事件
    }

    con.ondragleave = function(e) {
         e.preventDefault();
    }

    con.ondrop = function(e) {
         e.preventDefault();

        for (var i = 0; i < lis.length; i++) {
            if(lis[i].flag){ //如果flag为真，则添加一个li至box里
                con.appendChild(lis[i]);
            }
        };
    }


</script>
</html>

 

posted @ 2017-06-05 21:58  时间脱臼  阅读(678)  评论(0)    收藏  举报