<!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. 实验二 Java 面向对象程序设计

    实验内容 1 初步掌握单元测试和TDD 2 理解并掌握面向对象三要素:封面,继承,多态 3 初步掌握UML建模 4 熟悉SOLID原则 5 了解设计模式 (一)单元测试 D

  2. 20165211 预备作业3 Linux安装与学习

    20165211 预备作业3 Linux安装与学习 1. Linux安装 涉及软件:VirtualBox,Ubuntu 参考教程:基于VirtualBox安装Ubuntu图文教程 安装过程的问题 在安 ...

  3. SQL语句 查询同一个字符在某一个字符串中出现的次数

    select len(replace(字段名A,';','--'))-len(字段名A) from table表名

  4. python数据库编程小应用

    python DB api 数据库连接对象connection数据库交互对象cursor数据库异常类exceptions 流程:开始创建connection获取cursor执行查询.执行命令.获取数据 ...

  5. Go第八篇之包的使用

    Go 语言的源码复用建立在包(package)基础之上.Go 语言的入口 main() 函数所在的包(package)叫 main,main 包想要引用别的代码,必须同样以包的方式进行引用,本章内容将 ...

  6. 嵌入式系统 Boot Loader 技术内幕【转】

    本文转载自:https://www.ibm.com/developerworks/cn/linux/l-btloader/ 本文详细地介绍了基于嵌入式系统中的 OS 启动加载程序 ―― Boot Lo ...

  7. P3066 [USACO12DEC]逃跑的BarnRunning Away From

    目录 题目 思路 错误&&注意 代码 题目 luoguP3066 思路 虽说这个题目有多种做法,但 左偏树算法: 我们发现这个合并的时候并不好合并,因为存的值不是固定的 那我们是不是可 ...

  8. POJ 1751 Highways（最小生成树&Prim）题解

    思路: 一开始用Kruskal超时了,因为这是一个稠密图,边的数量最惨可能N^2,改用Prim. Prim是这样的,先选一个点(这里选1)作为集合A的起始元素,然后其他点为集合B的元素,我们要做的就是 ...

  9. BZOJ3296: [USACO2011 Open] Learning Languages 并查集

    Description 农夫约翰的N(2 <= N<=10,000)头奶牛,编号为1.. N,一共会流利地使用M(1<= M <=30,000)种语言,编号从1  .. M., ...

  10. [BZOJ5139][Usaco2017 Dec]Greedy Gift Takers 权值线段树

    Description Farmer John's nemesis, Farmer Nhoj, has NN cows (1≤N≤10^5), conveniently numbered 1…N. T ...