html5的拖放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字排序</title>
    <script type="text/javascript">

        function initPond(obj) {

            if(obj.getAttribute('flag')=='off'){
                obj.setAttribute('flag','on');
                obj.innerText = '重新开始';
            } else {
                //清除元素
                cleanNum();
            }

            // 定义一个数组有10个元素
            var len = 10;
            var arr = [];
            arr.length = len;
            for(var i=0;i<arr.length;i++){
                arr[i] = i+1;
            }
            // 对数组中有序的元素打乱顺序
            mixture(arr);
            // 创建div,放到pond中
            var pond = document.getElementById('pond');
            arr.forEach(function (val) {
                var div = document.createElement('div');
                div.innerText=val;
                div.className = 'num';
                div.setAttribute('draggable','true');
                div.setAttribute('id','num_'+val);
                div.setAttribute('ondragstart','drag(event);');
                pond.append(div);
            });


        }

        // 设置拖动的对象
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }

        // 设置元素允许拖元素到上面
        function allowDrop(ev) {
            ev.preventDefault();
        }

        // 拖动结束的动作
        function drop(ev) {
//            ev.preventDefault();
//            var toElement = ev.toElement;
            var moveOjb = document.getElementById(ev.dataTransfer.getData("Text"));
            if(ev.currentTarget.hasChildNodes()){
                document.getElementById('pond').append(ev.currentTarget.children[0]);
            }

            // check drop right or false,if false  change border red
            ev.currentTarget.appendChild(moveOjb);
            if( parseInt(moveOjb.innerText)==parseInt(ev.currentTarget.id.replace('place',''))){
                document.getElementById(ev.currentTarget.id).className='numCount'
            }else {
                document.getElementById(ev.currentTarget.id).className='redSolid';
            }

            // checkNum
            var num = checkNum();
            if(num==100){
                alert('恭喜你全部正确');
            }
        }

        function dropToPond(ev) {
            document.getElementById('pond').append(document.getElementById(ev.dataTransfer.getData("Text")));
        }
        
        /**
         * 打乱数组的排序
         * @param arr
         */
        function mixture(arr) {

            var arrMinture = [];
            var length = arr.length;
            for(var i=0;i<length;i++){
                var index = Math.floor(Math.random()*arr.length);
                arrMinture[i] = arr[index];
                arr.splice(index,1);
            }

            arrMinture.forEach(function (value) {
               arr.push(value);
            });
        }

        function checkNum() {
            var num = 0;
            document.getElementsByClassName('place')[0].childNodes.forEach(function (div) {
                if(div.className=='numCount'){
                    num+=10;
                }
            });
            return num;
        }

        function cleanNum() {
            var num = document.getElementsByClassName('num');
            var len = num.length;
            for(var i=len-1;i>=0;i--){
                num[i].remove();
            }
        }
    </script>
    <style type="text/css">
        a{
            text-decoration: none;
        }
        #pond{
            border: 2px dotted #ff006e;
            width: 280px;
            height: 100px;
        }

        .place>div{
            width: 35px;
            height: 35px;
            display: inline-block;
            border: 2px solid #46baff;
        }

        .num{
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: darkgrey;
            text-align: center;
            line-height: 30px;
            margin: 2px;
        }

        .redSolid{
            border: 2px solid red !important;
        }
    </style>
</head>
<body>
<h2>请给10个数字排序</h2>
<div class="place">
    <div id="place01" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place02" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place03" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place04" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place05" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place06" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place07" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place08" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place09" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
    <div id="place10" ondragover="allowDrop(event);" ondrop="drop(event);"></div>
</div>
<div id="pond"  ondragover="allowDrop(event);" ondrop="dropToPond(event);"></div>
<div><a href="javascript:void(0);" onclick="initPond(this);" flag="off">开始</a></div>
</body>
</html>
猜你喜欢
