1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.         <title>鼠标控制DIV移动</title>
  5.         <script type="text/javascript">
  6.  
  7.               var _IsMousedown = 0;
  8.               var _ClickLeft = 0;
  9.               var _ClickTop = 0;
  10.             function moveInit(evt) {
  11.               _IsMousedown = 1;
  12.               var obj = getObjById('moveDiv');
  13.               _ClickLeft = evt.clientX-obj.offsetLeft;
  14.               _ClickTop = evt.clientY-obj.offsetTop;
  15.  
  16.             }
  17.  
  18.             function startMove(evt) {
  19.               if(_IsMousedown == 0){
  20.                   return;
  21.               }
  22.               var obj = getObjById('moveDiv');
  23.               obj.style.left = evt.clientX - _ClickLeft;
  24.               obj.style.top = evt.clientY - _ClickTop;
  25.  
  26.             }
  27.  
  28.             function stopMove() {
  29.               _IsMousedown = 0;
  30.  
  31.             }
  32.  
  33.             function getObjById(id) {
  34.  
  35.                 return document.getElementById(id);
  36.  
  37.             }
  38.         </script>
  39.  
  40.         <style type="text/css" rel="stylesheet">
  41.             #movediv {
  42.                 width: 100px;
  43.                 height: 100px;
  44.                 position: absolute;
  45.                 border: 1px solid #000;
  46.                 background: #EAEAEA;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <div id="moveDiv" style="left:20px;top:20px;"
  52.  
  53.         onmousedown="moveInit(event);"
  54.  
  55.         onmousemove="startMove(event)"
  56.  
  57.         onmouseup="stopMove()"
  58.  
  59.         onmouseout="stopMove()">
  60.  
  61.         </div>
  62.     </body>
  63. </html>

html--鼠标控制DIV移动的更多相关文章

  1. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  2. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  3. 第一课 1) 控制div属性 总结

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  5. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  6. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  7. jQuery---鼠标滚轮控制div横向滚动条左右移动

    HTML <div class="table-responsive"> <div class="fhtable" style="wi ...

  8. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  9. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. [Angular 2] Build a select dropdown with *ngFor in Angular 2

    We want the start-pipe more flexable to get param, so when using it, we pass a second param as statu ...

  2. Android Studio 初体验

    Google在I/O */

  3. Qt 域名转成IP

    #include <stdio.h>#include <stdlib.h>#include <netdb.h>#include <arpa/inet.h> ...

  4. Android-兼容问题

    兼容性问题从何而来?答:使用了低版本没有的功能,可是目标设备包括低版本. 那我们如何解决兼容性问题? 1.如果是JAVA代码 1.1 使用TargetApi(x)注解,避免Android Lint报错 ...

  5. 浅谈MDX处理空值NULL及格式化结果

    MDX查询结果中往往会含有"NULL"值,这是某维度下对应的的量值不存在导致的,为了让报表呈现更好的效果,在有些情况下,需要将"NULL"的切片值置换成0,这些 ...

  6. 微信app的分享功能

    最近在做微信app,需要用到分享功能,横观文档,压根没有提过分享功能自定义的事情……后来在搜索中找到一些前辈的文章,使用WeixinJSBridge这个接口实现,但是,我非常非常好奇,这是什么渠道透露 ...

  7. destoon实现调用热门关键字的方法

    本文所述的destoon调用热门关键字的方法是根据数据库里面的保存的搜索的关键字来显示的.每个模块下面都有各自的关键字下面是调用的标签: ? 1 <!--{tag("moduleid= ...

  8. Gradle sync failed: failed to find Build Tools revision 21.1.2

    从github上下载了一个开源项目到Android Studio 出现以下问题: 下午2:56:05 Gradle sync started下午3:00:11 Gradle sync failed: ...

  9. 一些关于poi导入的样例

    获取请求对象 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; 获取上传的文件 ...

  10. Swift—属性观察者-备

    为了监听属性的变化,Swift提供了属性观察者.属性观察者能够监听存储属性的变化,即便变化前后的值相同,它们也能监听到. 属性观察者主要有以下两个: willSet:观察者在修改之前调用. didSe ...