小小千想和您聊一聊

当前位置: 首页> 技术分享> 前端 javascript 练习题-拖拽及九宫格

前端 javascript 练习题-拖拽及九宫格

  事件委托机制 ----------重要

  eg:点击按钮往ul中添加li,使添加的li也有相同的事件


var obtn=document.getElementById("btn");
    var olist=document.getElementById("list");  //获取ul
    var oli=olist.children;  //获取ul的子节点li
   olist.onclick=function(e){
       var evt=e||event;
       var tar=evt.target||evt.srcElement;  //获取事件源
       if(tar.nodeName.toLowerCase()=="li"){  判断事件源是不是是该执行目标
           console.log(tar.innerHTML); //此时不能用this,因为this指向的是ul
       }
   }
    obtn.onclick=function(){
        for(var i=0;i<4;i++){
            var lli=document.createElement("li");
            lli.innerHTML="aaaa";
            olist.appendChild(lli);
        }
    }


  拖拽效果


var odiv=document.getElementsByTagName("div")[0];
odiv.onmousedown=function(e){  //按下鼠标的事件
    var evt=e||event;
    var lf=evt.offsetX;
    var tp=evt.offsetY;
  document.onmousemove=function(e){  //鼠标移动事件
       var evt=e||event;
        var x=evt.clientX-lf;  //让鼠标一直在按下的那个位置
       var y=evt.clientY-tp;
      //设置元素只能在可视区域内移动
      if(x<=0){
          x=0;
      }
      if(x>=document.documentElement.clientWidth-odiv.offsetWidth){
        x=document.documentElement.clientWidth-odiv.offsetWidth
      }
      if(y<=0){
          y=0;
      }
        if(y>=document.documentElement.clientHeight-odiv.offsetHeight){
            y=document.documentElement.clientHeight-odiv.offsetHeight;
        }
      odiv.style.left=x+"px";  //让元素跟着鼠标移动
      odiv.style.top=y+"px";
    }
    document.onmouseup=function(){  //鼠标抬起事件
        document.onmousemove=null;
    }}


  九宫格

  js代码:


var obox=document.getElementById("box");
    //创建结构
    for(var i=0;i<3;i++){  //控制外层的行数
        for(var j=0;j<3;j++){  //控制内层
            var odiv=document.createElement("div");
            obox.appendChild(odiv);
           /* var r=Math.floor(Math.random()*256);
            var g=Math.floor(Math.random()*256);
            var b=Math.floor(Math.random()*256);*/
            odiv.style.backgroundColor="rgb("+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+")";  //字符串拼接
            odiv.style.left=j*(odiv.offsetWidth+10)+"px";
            odiv.style.top=i*(odiv.offsetHeight+10)+"px";

        }
    }
    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;
    }}


上一篇:npm + gulp + scss + 项目架构

下一篇:前端javascript练习题-cookie及购物车

QQ技术交流群

千锋HTML5官方②群
857920838

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码