可以拖拽的div

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. #div1 {width:100px; height:100px; background:red; position:absolute;}
  6. </style>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>可以拖拽的div</title>
  9. <script>
  10. window.onload=function ()
  11. {
  12.     var oDiv=document.getElementById('div1');
  13.  
  14.     var disX=0;
  15.     var disY=0;
  16.  
  17.     oDiv.onmousedown=function (ev)
  18.     {
  19.         var oEvent=ev||event;
  20.  
  21.         disX=oEvent.clientX-oDiv.offsetLeft;
  22.         disY=oEvent.clientY-oDiv.offsetTop;
  23.  
  24.         document.onmousemove=function (ev)
  25.         {
  26.             var oEvent=ev||event;
  27.             var l=oEvent.clientX-disX;
  28.             var t=oEvent.clientY-disY;
  29.  
  30.             if(l<0)
  31.             {
  32.                 l=0;
  33.             }
  34.             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
  35.             {
  36.                 l=document.documentElement.clientWidth-oDiv.offsetWidth;
  37.             }
  38.  
  39.             if(t<0)
  40.             {
  41.                 t=0;
  42.             }
  43.             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
  44.             {
  45.                 t=document.documentElement.clientHeight-oDiv.offsetHeight;
  46.             }
  47.  
  48.             oDiv.style.left=l+'px';
  49.             oDiv.style.top=t+'px';
  50.         };
  51.  
  52.         document.onmouseup=function ()
  53.         {
  54.             document.onmousemove=null;
  55.             document.onmouseup=null;
  56.         };
  57.  
  58.         return false;
  59.     };
  60. };
  61. </script>
  62. </head>
  63.  
  64. <body>
  65. <div id="div1"></div>
  66. </body>
  67. </html>

可以随鼠标拖拽的div的更多相关文章

  1. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  2. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  3. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. html5的鼠标拖拽

    鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  6. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  7. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  8. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  9. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

随机推荐

  1. 自己写的python脚本（抄的别人的，自己改了改，用于整理大量txt数据并插入到数据库）

    昨天,遇到了一个问题,有100w条弱口令数据,需要插入到数据库中,而且保存格式为txt. 身为程序员不可能一条一条的去写sql语句吧(主要是工作量太大,我也懒得干).所以,我 就百度了一下,看有没有相 ...

  2. 每天一个linux命令(27)--tar命令

    通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候 tar 命令就是必不可少的一个功能强大的工具.Linux 中最流行的 tar 是麻雀虽小,五脏俱全. tar 命令可以为Linux ...

  3. [Qt初级] 解决 中QMainWindow和QDockWidget添加布局失败问题

    初接触Qt,使用的教程是陆文周编写的<Qt5开发及实例>一书. 其中有关于QDockWidget.QStackedWidget这些类的介绍和使用实例. 要首先说明的是书上讲的非常的清楚,代 ...

  4. Kubernetes运维生态-cAdvisor分析

    Kubernetes的生态中,cAdvisor是作为容器监控数据采集的Agent,其部署在每个节点上,内部代码结构大致如下:代码结构很良好,collector和storage部分基本可做到增量扩展开发 ...

  5. [转载]解决win10 VC++6.0 应用程序无法正常运行 0xc0000142

    本文转载自http://blog.csdn.net/w_9449/article/details/52864135 转载请申明哦,其实我发现自从我在贴吧发了帖子后,就冒出了不少帖子.经验.当然方法和我 ...

  6. 基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  7. MySQL优化三（InnoDB优化）

    body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...

  8. Compare Version Numbers leetcode

    Compare two version numbers version1 and version2.If version1 > version2 return 1, if version1 &l ...

  9. 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装

    KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...

  10. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...