<!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. 判断某个ImageView的背景图是否是已知的背景图相等

    if (ibtn.getDrawable().getConstantState().equals(getResources().getDrawable(R.mipmap.image).getConst ...

  2. Ubuntu 14.04 更新gcc版本至4.9.2

    参考: ubuntu 14.04 更新 gcc/g++ 4.9.2 Ubuntu 14.04 更新gcc版本至4.9.2 1.更新源,安装gcc v4.9.2 $ sudo add-apt-repos ...

  3. MVC---- DataSet 页面遍历

    后台代码: public override ActionResult Index() { DataSet ab = custapp.GetCustomerFollows(); ViewData[&qu ...

  4. Android广播接收器和Activity间传递数据

    Activity向广播接收器传递数据很简单,只需要在发送广播前将数据put进Intent中就行了. 广播接收器怎么向Activity传送数据?这里要用到接口,通过在广播接收器里定义一个接口,然后让接收 ...

  5. 2017"百度之星"程序设计大赛 - 资格赛-度度熊与邪恶大魔王（dp+后缀最小值）

    度度熊与邪恶大魔王 思路:由于防御和血量的范围很小,所以暴力枚举出对于每种防御造成的每种伤害所需的最小花费,最后只需在伤害大于等于血量的情况下再找到最小花费(这个只需要后缀最小值预处理一下就可以了) ...

  6. C#将集合和Json格式互相转换的几种方式

    1.使用微软自带的System.Web.Extensions.dll转换,该DLL文件一般存在于如下路径:c:\Program Files\Reference Assemblies\Microsoft ...

  7. Android中如何实现EditText的自动换行

    要实现EditText的自动换行需要实现如下设置: <EditText android:id="@+id/function_lifingcost_edit_txtRemark" ...

  8. JSP中scope属性 scope属性决定了JavaBean对象存在的范围

    scope属性决定了JavaBean对象存在的范围. scope的可选值包括: ---page(默认值) ---request ---session ---application   1.page范围 ...

  9. ArcGIS 要素闪烁

    ArcGIS 要素闪烁 通过双击要素图例,闪烁定位到要素,并且闪烁一段时间: IFeatureLayer featureLayer = layer as IFeatureLayer;          ...

  10. mysql查询出来的某一列合并成一个字段

    查询所有用户及角色,一个用户会有多个角色 select u.*,sr.* from users u left join sys_user_role sur on sur.userCode=u.id l ...