好程序员web前端教程分享前端javascript练习题

标签：判断   timer   odi   nod   i++   ntb   offset   src   als   

    }
}
var strarr=["a","b","c","d","e","f","g","h","i","m"];
var child=obox.children;
//给每个小块加上文字
for(var i=0;i<child.length;i++){
    child[i].innerHTML=strarr[i];
}
//拖拽
for(var i=0;i<child.length;i++){
    child[i].onmousedown=function(e){
        var evt=e||event;
        var lf=evt.offsetX;
        var tp=evt.offsetY;
        var current=this;  //将this保存current中 ，因为上下指向的this不同
        //因为拖动的时候原位置，还需要有东西，所以才克隆
        var clone=current.cloneNode(); //克隆一个当前的元素，并添加到盒子里
            clone.style.border="1px dashed #000";//            obox.appendChild(clone);  //因为添加之后克隆的索引在最后，// 后面需要进行距离比较，所以需要将克隆节点和当前节点进行替换
        obox.replaceChild(clone,current);  //用克隆的节点替换当前节点
        obox.appendChild(current);  //把当前节点加到盒子里
        current.style.zIndex=1;
        document.onmousemove=function(e){
            var evt=e||event;
            var x= e.clientX-lf-obox.offsetLeft;
            var y= e.clientY-tp-obox.offsetTop;
            //当前对象的坐标：随着鼠标移动
            current.style.left=x+"px";
            current.style.top=y+"px";
            return false;  //取消默认行为
        }
        document.onmouseup=function(){
            //将当前的这个和剩下所有的进行比较，找出距离最近的
            //将当前放到距离最近的位置，最近的那个放到克隆的位置
            var arr=[];
            var newarr=[];
            //以为此时当前节点的索引在最后，不需要和自身比较，所以去掉最后一个索引
            for(var i=0;i<child.length-1;i++){
                var wid=current.offsetLeft-child[i].offsetLeft;
                var hei=current.offsetTop-child[i].offsetTop;
                var juli=Math.sqrt(Math.pow(wid,2)+Math.pow(hei,2));
                arr.push(juli);
                newarr.push(juli);
            }
            arr.sort(function(a,b){
                return a-b;
            })
            var min=arr[0];
            var minindex=newarr.indexOf(min);

            //交换位置：当前的坐标为最小距离对应的位置，最小值的放在克隆所在的位置
            current.style.left=child[minindex].style.left;
            current.style.top=child[minindex].style.top;

            child[minindex].style.left=clone.style.left;
            child[minindex].style.top=clone.style.top;

            obox.removeChild(clone); //交换位置之后将克隆的节点删除
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
}

轨迹
js代码：
var odiv = document.getElementsByTagName("div")[0];var arr=[]; //用来保存鼠标移动时的坐标位置
document.onmousedown = function (e) {
var evt1 = e || event;
var x=evt1.clientX;
var y=evt1.clientY;
arr.push({pagex:x,pagey:y});
document.onmousemove=function(e){
var evt = e || event;
var x = evt.clientX;
var y = evt.clientY;
arr.push({pagex:x,pagey:y}); //采用对象数组存储，因为坐标成对好进行操作
return false; //取消浏览器的默认行为
//console.log(arr);
}
document.onmouseup=function(){
var timer=setInterval(function(){
odiv.style.left=arr[0].pagex+"px";
odiv.style.top=arr[0].pagey+"px";
arr.splice(0,1); //让元素坐标始终从0开始，splice会改变原数组长度
if(arr.length==0){ //当数组长度为0，说明保存的坐标执行完了
clearInterval(timer);
}
},20);
document.onmousemove=null;
}}

好程序员web前端教程分享前端javascript练习题

标签：判断   timer   odi   nod   i++   ntb   offset   src   als   

原文地址：https://blog.51cto.com/14573321/2452664