<!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. MAC BOOK Air 安装metasploit-framework

    Step 1:Xcode命令行开发工具OS X确保它已经安装了Xcode开发工具,在终端执行: xcode-select --install1Step 2:Java SDK安装Java sdk,不能用 ...

  2. P2709 小B的询问

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  3. org.apache.axis2.AxisFault: unknown

    遇到这个异常懵逼了很长时间才解决,axis2框架个人感觉进行接口相互调用还是比较麻烦的, 调了很长时间,我由a项目调用b项目的接口时,一直报这个错,在网上找了很长时间,也没找到 解决的办法,自己慢慢的 ...

  4. python argparse模块--转载

    add_argument:读入命令行参数,该调用有多个参数 ArgumentParser.add_argument(name or flags…[, action][, nargs][, const] ...

  5. codevs 1081 线段树练习 2 线段树

    题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]的所有数都增加X 2:询问第i个数是什么? 输入描述 Input Description 第一行一个正整数n,接下来n行n ...

  6. Python day10 global关键字、函数递归、匿名函数、map函数的用法详解

    1.global关键字 引用全局变量,在局部全局变量改变,也会改变,global相当于指针,将地址指向全局变量的name name='littlepage' def littepage(): glob ...

  7. YOLO V2论文理解

    概述 YOLO(You Only Look Once: Unified, Real-Time Object Detection)从v1版本进化到了v2版本,作者在darknet主页先行一步放出源代码, ...

  8. Redis<六> Key通用操作

    1). KEYS pattern : 查找所有符合给定模式 pattern 的 key . 如 keys * , keys *list* 2). DEL key [key ...] : 删除给定的一个 ...

  9. angular5 ng-content使用方法

    先自定义一个组件import { Component } from '@angular/core'; @Component({ selector: 'exe-greet', template: ` & ...

  10. mount: unknown filesystem type 'LVM2_member'解决方案【转】

    一台服务器,普通/dev/sda1/2(硬盘一) 同步数据到 lvm_member(硬盘二) rsync两硬盘数据同步: From: http://hi.baidu.com/williwill/ite ...