<!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. 20135234mqy-——信息安全系统设计基础第五周学习总结

    程序的机器级表示 3.1 intel处理器系列俗称x86,经历了一开始个长期的,不断进化的发展过程. 开始时它是第一代单芯片,16位微处理器之一,由于当时集成电路技术水性有限,其中做了很多妥协,此后, ...

  2. 探索Java8：(三)Predicate接口的使用

    上一篇学习了下Function接口的使用,本篇我们学习下另一个实用的函数式接口Predicate. Predicate的源码跟Function的很像,我们可以对比这两个来分析下.直接上Predicat ...

  3. arch/manjaro linux configuration

    0. Installation SystemConfiguration: # 启动时选择第二项boot(non-free),Manjaro自带的驱动精灵会帮你安装好所需驱动,笔记本双显卡则会帮你安装b ...

  4. 获取mips32机器的各数据类型的取值范围

    一.背景: 使用的mips 32bit机器,32bit的vxworks操作系统(各机器带来的范围都不一样,与操作系统也有关联) 二.验证类型的范围: 2.1 unsigned long: void m ...

  5. Elasticsearch 基础概念知识

    接近实时(NRT) Elasticsearch是一个接近实时的搜索平台.这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒). 集群(cluster) 一个集群就是由一个或多 ...

  6. RHEL7使用NAT方式上网

    1.首先,Windows7无法设置网络共享VMNet8的问题,是因为禁用了Firewall服务,设置为自动,启用即可:且需要启动VMWare的DHCP和NAT两个服务,这两个服务在我的机器上是关闭的, ...

  7. 【安装】Mysql在Linux上安装

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:mysql-5.6.37-linux-glibc2.12- ...

  8. [JVM] - 继10进制的java.lang.Object查看之后

    cmd清除命令:cls 之后查阅了其它博客,发现这位大神同样也在做JVM,并且我很希望用它的10进制转16进制类来测试一下该解析的10进制是否对应着Object的16进制呢? 这位大神的10进制转16 ...

  9. IEnumerable与IEnumerator

    IEnumerable接口 IEnumerable接口:实现该接口的类,表明该类下有可以枚举的元素 public interface IEnumerable { //返回一个实现了IEnumerato ...

  10. python 可视化时间转时间元组（自定义）

    >>> print(time.strptime('2018-9-30 11:32:23', '%Y-%m-%d %H:%M:%S')) time.struct_time(tm_yea ...