Aidrich

关于鼠标和键盘实现节点移动

　　大家在电脑上都会遇到一些利用鼠标拖动的事件，最好的例子就是咱们在登陆博客园的时候，有一个利用鼠标拖动图片到达指定位置从而完成验证成功登陆到博客园里面来，这次我主要是想说一下我自己个人利用JavaScript里面的 onmousedown(鼠标按下触发事件)，onmousemove（鼠标抬起取消事件），onmouseup（创建函数取消鼠标的拖拽事件）。另一个就是键盘事件 onkeydown （当按下键盘的时候触发事件） onkeyup（松开键盘的时候取消事件）其中的keyCode：就是对应相应的键盘按键码　　　　　　

下面是：字母和数字键的键码值(keyCode) 大家可以做为一个参考

字母和数字键的键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的键的键码值(keyCode)				功能键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

控制键键码值(keyCode)
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Down Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	/\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up A

以上就是相应的键盘按键码相对应的简码数字，这次我主要编写的代码是鼠标的左键和键盘的 Left Arrow 、 Up A、 Right Arrow、 Down Arrow。进行了节点的移动。

我的代码注释，大家可以参考一下也可以通过以上的键盘按键码进行修改代码

HTML 代码：

这一串HTML 代码主要就是创建div 并设置一个模型为节点，到时可以通过JS 控制从而达到键盘、鼠标来操控这个div

<style>
        * {
            margin: 0;
            padding: 0;
        }

        #odiv {
            width: 140px;
            height: 200px;
            background-image: url("dd663087e950352a7035a2135443fbf2b3118b213ef.png");
            background-repeat: no-repeat;
           /* 给div设置一个样式   图片我是用背景图片  主要还是为 打飞机做准备 */
        }
    </style>
</head>

<body>
    <div id="odiv">
       <!-- 在body里面创建一个div -->
    </div>
</body>
</html>

　按照正常的if判断keyCode码的时候会导致div移动的时候会有0.5-0.7秒的延迟，所以我就想了一个办法。

在onkeydown 事件中，我把变量 keyCode==键盘码为true和fales主要是为了让在键盘移动的时候能够取绝对值，能正常的在按下键盘时顺畅的移动div
最后我用计时器反复监测并执行判断 checkCtrl 这个移动条件函数，通过这个方法就可以解决延迟问题了。

<script>
        odiv = document.getElementById("odiv");
        if (odiv.style.marginLeft == "") {
            odiv.style.marginLeft = "0px";
        }
        //判断odiv 的Left  如果为空的时候 那么久让他距离左边为0px
        if(odiv.style.marginTop == ""){
            odiv.style.marginTop = "0px";
        }
        //判断odiv 的Top  如果为空的时候 那么久让他距离上边为0px
        var lBtn = false;
        var tBtn = false;
        var rBtn = false;
        var bBtn = false;
        //变量出键盘事件的上下左右  并且默认为false
        document.onkeydown = function () { // 创建document  的键盘按下事件
            // console.log(1233)
            // console.log(document.onkeydown())
            var e = window.event || arguments[0];
            if (e.keyCode == 37) {
                lBtn = true;
            }
            //e的event键盘事件为 37（左边）的时候为true  按下键盘触发事件
            if (e.keyCode == 38) {
                tBtn = true;
            }
             //e的event键盘事件为 38（上边）的时候为true 按下键盘触发事件
            if (e.keyCode == 39) {
                rBtn = true;
            }
             //e的event键盘事件为 39（右边）的时候为true 按下键盘触发事件
            if (e.keyCode == 40) {
                bBtn = true;
            }
             //e的event键盘事件为 40（下边）的时候为true 按下键盘触发事件
        }
        document.onkeyup = function () {  //onkeyup为键盘按键抬起时取消事件
            var e = window.event || arguments[0]
            if (e.keyCode == 37) {
                lBtn = false;
            //e的event键盘事件为 37（左边）的时候为false 抬起键盘取消事件
                
            }
            if (e.keyCode == 38) {
                tBtn = false;
            //e的event键盘事件为 38（左边）的时候为false 抬起键盘取消事件
                
            }
            if (e.keyCode == 39) {
                rBtn = false;
            //e的event键盘事件为 39（左边）的时候为false 抬起键盘取消事件
                
            }
            if (e.keyCode == 40) {
                bBtn = false;
            //e的event键盘事件为 40（左边）的时候为false 抬起键盘取消事件
                
            }
        }
        function checkCtrl() {
            if (lBtn == true) {
                odiv.style.marginLeft = parseInt(odiv.style.marginLeft) - 5 + "px"
                //  判断 div样式 左侧  按下的时候的距离

                if (odiv.style.marginLeft <= "0px") {
                    odiv.style.marginLeft = "0px";
                }
                //这里判断的是div在距离文档里面距离为0px的时候就等于0px  主要就是为了不让div超出文档流  始终可见
            }
            if (tBtn == true) {
                odiv.style.marginTop = parseInt(odiv.style.marginTop) - 5 + "px";

                if (odiv.style.marginTop <= "0px") {
                    odiv.style.marginTop = "0px";
                }

            }
            if (rBtn == true) {
                odiv.style.marginLeft = (parseInt(odiv.style.marginLeft) + 5) + "px";

                var r = document.documentElement.clientWidth - 140 + "px";
                if (parseInt(odiv.style.marginLeft) > parseInt(r)) {
                    odiv.style.marginLeft = r;
                    //  这里是定义一个变量 来装取减去div 的宽度 让其div 节点不超出右侧文档流
                }
            }
            if (bBtn == true) {
                odiv.style.marginTop = (parseInt(odiv.style.marginTop) + 5) + "px"
                var b = document.documentElement.clientHeight - 180+ "px";
                if (parseInt(odiv.style.marginTop) > parseInt(b)) {
                    odiv.style.marginTop = b;
                    //  这里是定义一个变量 来装取减去div 的宽度 让其div 节点不超出下面文档流
                }
            }
        }
        setInterval(checkCtrl, 10)
            //利用定时器反复查看并执行按键的函数 checkCtrl

        odiv.onmousedown = function () {
            var e = window.event || arguments[0];//获取event对象
            var mouseToElent = e.clientX - odiv.offsetLeft
            var mouseToElentTop = e.clientY - odiv.offsetTop
            //定义变量获取window的event对象  event对象的clientX 和Y 轴  减去div距离浏览器的左边缘 和上边缘
            document.onmousemove = function () {
                var moveEV = window.event || arguments[0];//获取event对象
                // console.log(moveEV.clientX)
                odiv.style.marginLeft = moveEV.clientX - mouseToElent + "px"
                odiv.style.marginTop = moveEV.clientY - mouseToElentTop + "px"
                moveEV.preventDefault()//阻止默认行为  dom浏览器
                moveEV.returnValue = false//IE 和dom
                // console.log(odiv.style.marginLeft)
                if (odiv.style.marginLeft <= "0px") {
                    odiv.style.marginLeft = "0px";
                }
                //这里是鼠标事件  鼠标移动div的时候不超出左边文档流
                if (odiv.style.marginTop <= "0px") {
                    odiv.style.marginTop = "0px";
                //这里是鼠标事件  鼠标移动div的时候不超出右边文档流                    
                }
                // console.log(odiv.style.marginLeft)
                var j = document.documentElement.clientWidth - 140 + "px"
                if (parseInt(odiv.style.marginLeft) > parseInt(j)) {
                    odiv.style.marginLeft = j
                }
                    //同上键盘事件  也是定义一个变量 来装取 文档流的 宽度来减去div的宽度  使其不让超出文档流的右侧
                var b = document.documentElement.clientHeight - 190 + "px"
                // console.log(b)
                if (parseInt(odiv.style.marginTop) > parseInt(b)) {
                    odiv.style.marginTop = b
                    //同上键盘事件  也是定义一个变量 来装取 文档流的 宽度来减去div的宽度  使其不让超出文档流的下边
                   
                }
               
            }
        }
        document.onmouseup = function () {
            document.onmousemove = ''
        }
        //如果没有这一串代码 那么当鼠标松开div后一样会绑定在鼠标指针上 
        //  所以编写这串代码后 鼠标松开div后就可以让div停留在那里  鼠标就可以自由移动  做其他事情啦！
        
    </script>

本次是小弟这次对键盘和鼠标对节点移动的简单讲解，大牛如有缘看到我的随笔，请多多指教下。

在移动div时，出现了一点小bug，还希望哪位大牛可以帮小弟解决一下，如果div键盘移动到右下角时 b = document.documentElement.clientHeight - 190 + "px" ，如果我改为-200px 就会出现卡顿的现象。

毕竟我现在也是在学习阶段，大家可以多多为小弟提供意见和建议一起成长，谢谢您花出您宝贵的时间看了在下的随笔，祝您生活愉快！

posted @ 2017-12-23 16:58 Aidrich 阅读(312) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Aidrich

【知了堂学习笔记】/关于鼠标和键盘实现节点移动/Aidrich

关于鼠标和键盘实现节点移动

公告