html5的拖放

来源：互联网发布：网络零售额什么意思编辑：程序博客网时间：2024/05/21 17:00
<!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>
阅读全文
0 0