<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

*{margin:;padding:;list-style:none;}

#div1{ position:absolute;left:;top:;width:200px; height:200px; background:red;}

</style>

<script>

window.onload = function(){

     var oDiv = document.getElementById("div1");

     var bLeft = bTop = bRight = bBottom = false;

     var step = ;

     var bDarg = false;

     var json = {width:oDiv.offsetWidth + "px",height:"200px",left:,top:,background:"red"};

     function initDiv(json){

         for(var name in json){

             oDiv.style[name] = json[name];//?

         }

     }

     document.onkeydown = function(ev){

         var oEvent = ev || event;

         var keyCode = oEvent.keyCode;

         switch(keyCode){

             case :

               bLeft = true;

               break;

             case :

               bTop = true;

               break;

             case :

               bRight = true;

               break;

             case :

               bBottom = true;

               break;

         }

         //ctrl + Q   控制是否可以拖拽

         if(oEvent.ctrlKey && keyCode == ){

             bDarg = !bDarg;

             if(bDarg){

                drag();

             } else {

                noDrag();

             }

         }

         //ctrl + 上 中心点放大

         if(oEvent.ctrlKey && keyCode == ){

            bTop = false;

            oDiv.style.width = oDiv.offsetWidth + step + "px";

            oDiv.style.height = oDiv.offsetHeight + step + "px";

            oDiv.style.left = oDiv.offsetLeft - step/ + "px";

            oDiv.style.top = oDiv.offsetTop - step/ + "px"; 

         }

         //ctrl + 下  中心点缩小

         if(oEvent.ctrlKey && keyCode == ){

             bBottom = false;

            oDiv.style.width = oDiv.offsetWidth - step + "px";

            oDiv.style.height = oDiv.offsetHeight - step + "px";

            oDiv.style.left = oDiv.offsetLeft + step/ + "px";

            oDiv.style.top = oDiv.offsetTop + step/ + "px";

         }

         //ctrl + 回车   还原到左上角

         if(oEvent.ctrlKey && keyCode == ){

             //oDiv.style.cssText = " position:absolute;left:0;top:0;width:200px; height:200px; background:red;";

             initDiv(json);

         }

     };

     document.onkeyup = function(ev){

         var oEvent = ev || event;

         var keyCode = oEvent.keyCode;

         switch(keyCode){

             case :

               bLeft = false;

               break;

             case :

               bTop = false;

               break;

             case :

               bRight = false;

               break;

             case :

               bBottom = false;

               break;

         }

     };

     setInterval(function(){

         if(bLeft){

             oDiv.style.left = oDiv.offsetLeft - step + "px";

         }

         if(bTop){

             oDiv.style.top = oDiv.offsetTop - step + "px";

         }

         if(bRight){

             oDiv.style.left = oDiv.offsetLeft + step + "px";

         }

         if(bBottom){

             oDiv.style.top = oDiv.offsetTop + step + "px";

         }

     },);

     function noDrag(){

         oDiv.onmousedown = null;

     }

     function drag(){

         oDiv.onmousedown = function(ev){

            var oEvent = ev || event;

            var disX = oEvent.clientX - oDiv.offsetLeft;

            var disY = oEvent.clientY - oDiv.offsetTop;

            document.onmousemove = function(ev){

                var oEvent = ev || event;

                var l=oEvent.clientX-disX;

                var t=oEvent.clientY-disY;

                if(l<){

                    l=;

                }else if(l > document.documentElement.clientWidth - oDiv.offsetWidth) {

                    l = document.documentElement.clientWidth - oDiv.offsetWidth;

                }

                if(t<){

                    t=;

                } else if(t > document.documentElement.clientHeight - oDiv.offsetHeight) {

                    t = document.documentElement.clientHeight - oDiv.offsetHeight;

                }

                oDiv.style.left = l + "px";

                oDiv.style.top = t + "px";

            };

            document.onmouseup = function(){

                document.onmousemove = null;

                document.onmouseup = null;

                oDiv.releaseCapture && oDiv.releaseCapture();    //释放捕获

            };

            //捕获  解决IE浏览器下拖拽图片的bug，即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点

            oDiv.setCapture && oDiv.setCapture();

            return false;

         };

     }

};

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态的更多相关文章

  1. JS控制文本框内键盘上下左右键的焦点

    avaScript键盘上下左右控制文本框焦点的方法有很多,这里简单说两种方法: 方法一: 创建一个table的dom元素,包含5行4列的文本框 <!DOCTYPE HTML PUBLIC &qu ...

  2. 通过键盘上下键 JS事件，控制候选词的选择项

    效果图 JS代码 //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function ( ...

  3. jquery实现输入框聚焦，键盘上下键选择城市

    在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示: 实现代码如下: /** *输入框聚焦,键盘上下键选择城市 */ ;(func ...

  4. 键盘虚拟键值编码表 使用keybd_Event

    键盘虚拟键值编码表 使用keybd_Event 模拟键盘输入首先要用到一个API函数:keybd_event. 我们是菜鸟,所以不必具体去理解它的详细用法,只要按以下方法使用即可了!呵呵! 模拟按键有 ...

  5. KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库

    KeyboardJS 开发指南 - 与 Three.js 配合使用的捕捉键盘组合键库 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非 ...

  6. js js键盘各键对应的代码 ---转

    0x1 鼠标左键\r 0x2 鼠标右键\r 0x3 CANCEL 键\r 0x4 鼠标中键\r 0x8 BACKSPACE 键\r 0x9 TAB 键\r 0xC CLEAR 键\r 0xD ENTE ...

  7. 键盘各键对应的编码值（key code）

    原文:键盘各键对应的编码值(key code) 来源:http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes ...

  8. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  9. 在tmux中的vi 上下左右键变为了ABCD等字符

    在本机上用vim编辑时,上下左右键没有问题,但是在tmux中确出现ABCD等字符. 原因是在tmux这个终端,默认做了字符转换,网上搜了很多答案,解决问题的设置是: set term=xterm

随机推荐

  1. 面向对象初调用：foolish 电梯

    本周我们完成的任务是傻瓜电梯的调度,对于那十分十分详细的指导书,我感觉想要说明白题目要求,是做不到的,所以就把指导书贴出来给大家看了,,由于在下还不会网页制作,只能通过百度网盘了,https://pa ...

  2. Maximum GCD （stringstream）题解

    Given the N integers, you have to find the maximum GCD (greatest common divisor) of every possiblepa ...

  3. NetMagic Simple Overview

    参考: NetMagic Startup: How to develop NetMagic rapidly NetMagic Simple Overview NetMagic 是什么? NetMagi ...

  4. 【Coursera】Third Week(2)

    拾遗 Steve Jobs与World Wide Web 如果你有仔细观察Robert Cailliau的视频的话,你会发现他工作所用的电脑为NeXT电脑. Jobs 也对web 产生了一定的影响,众 ...

  5. 自整理的jquery.Validate验证表达式

    自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母    /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod("letters ...

  6. 记一次诡异的bug

    使用django做项目,在视图函数中需要查询,查询前构造一个查询参数的模型来过滤参数防止报错,然后调用模型的方法返回一个字典,包括了所有查询的字段和值,发现只要查询过一次之后,后续的访问查询结果会在之 ...

  7. UVa 1603 破坏正方形

    https://vjudge.net/problem/UVA-1603 题意:有一个火柴棍组成的正方形网格,计算至少要拿走多少根火柴才能破坏所有正方形. 思路:从边长为1的正方形开始遍历,将正方形的边 ...

  8. React Native 组件之TouchableHightLight

    TouchableHighlight 这个组件一般是用于封装视图 给视图添加事件“触摸按下”(类似于click事件) <TouchableHighlight onPress={this._onP ...

  9. Lua 中与字符串有关的函数学习

    string1 = "lua" print(string.upper(string1)) string2 = 'LGS' print(string.lower(string2)) ...

  10. English trip V1 - 4.Do you have it? Teacher:Patrick Key: have - has doesn't have

    In this lesson you will learn to describe what you have. STARTER Do you have a ...?  # 你有...吗? car b ...