HTML代码

  1. <div id="idOuterDiv" class="CsOuterDiv">
  2.  
  3. </div>

CSS代码

  1. body {
  2. background-color:#232429;
  3. }
  4. .CsOuterDiv {
  5. width:256px;
  6. height:146px;
  7. background-color:white;
  8. position:absolute;
  9. top:50%;
  10. left:50%;
  11. transform:translateX(-50%) translateY(-50%);
  12. -moz-transform:translateX(-50%) translateY(-50%);
  13. -webkit-transform:translateX(-50%) translateY(-50%);
  14. -ms-transform:translateX(-50%) translateY(-50%);
  15. border-radius:5px;
  16. box-shadow:3px 3px 10px blue;
  17. }

JS代码

  1. function dragFunc(id) {
  2. var Drag = document.getElementById(id);
  3. Drag.onmousedown = function(event) {
  4. var ev = event || window.event;
  5. event.stopPropagation();
  6. var disX = ev.clientX - Drag.offsetLeft;
  7. var disY = ev.clientY - Drag.offsetTop;
  8. document.onmousemove = function(event) {
  9. var ev = event || window.event;
  10. Drag.style.left = ev.clientX - disX + "px";
  11. Drag.style.top = ev.clientY - disY + "px";
  12. Drag.style.cursor = "move";
  13. };
  14. };
  15. Drag.onmouseup = function() {
  16. document.onmousemove = null;
  17. this.style.cursor = "default";
  18. };
  19. };
  20. dragFunc("idOuterDiv");

让div在body中任意拖动的更多相关文章

  1. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  2. JS中的拖动之—— ondragstart,ondrag,ondragend , ondragenter , ondragover , ondragleave, ondrop 的区别

    关于 HTML5 中的拖动功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放.以下 我只做一下简介. 1 如果你想让元素变得可拖动,首先 你得对元素设置 draggable 属性 此属 ...

  3. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  4. 使用ARP欺骗, 截取局域网中任意一台机器的网页请求,破解用户名密码等信息

    ARP欺骗的作用 当你在网吧玩,发现有人玩LOL大吵大闹, 用ARP欺骗把他踢下线吧 当你在咖啡厅看上某一个看书的妹纸,又不好意思开口要微信号, 用arp欺骗,不知不觉获取到她的微信号和聊天记录,吓一 ...

  5. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  6. 关于delphi点击webbrowser中任意一点的问题

    关于delphi点击webbrowser中任意一点的问题 有时候我们需要delphi载入webbrowser1打开网页的时候 需要点击某一个点的位置 可能是坐标 可能是按钮 可能是其他的控件应该如何来 ...

  7. 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果

    (国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果 相信这么多手机APP中 ...

  8. [百度]数组A中任意两个相邻元素大小相差1,在其中查找某个数

    一.问题来源及描述 今天看了July的微博,发现了七月问题,有这个题,挺有意思的. 数组A中任意两个相邻元素大小相差1,现给定这样的数组A和目标整数t,找出t在数组A中的位置.如数组:[1,2,3,4 ...

  9. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

随机推荐

  1. 使用apache.tika判断文件类型

    一. 判断文件类型一般可采用两种方式 1. 后缀名判断 简单易操作,但无法准确判断类型 2. 文件头信息判断 通常可以判断文件类型,但有些文件类型无法判断(如word和excel头信息的前几个字节是一 ...

  2. rhel6安装rabbitmq-sever

    1.下载rabbitmq-sever3.7.7,我下的是RHEL/CentOS 6.x, 你的系统是哪个版本就下哪个https://github.com/rabbitmq/ Downloadson G ...

  3. python 文本全选

    这个是一个控制框有效果 # encoding: utf-8 from Tkinter import * def printentry(event): print("click on" ...

  4. 进程及Python实现

    进程杂谈 #进程就是正在执行的一个过程,是对正在运行程序的一个抽象 #进程由程序.数据集和进程控制块(最重要的,进程切换 状态如何保存,恢复和记录)组成 """ 进程调度 ...

  5. selenium 滚动条的滚动

    如果是一个页面自带的滚动条(即网页的的滚动条) 可直接用js js="window.scrollTo(x,y);"     x(横向),y(纵向)代表的就是位置  ,具体移动到哪里 ...

  6. java GC jvm 内存分布 和新生代,老年代,永久代,(详细)

    如果大家想深入的了解JVM,可以读读周志明<深入理解Java虚拟机:JVM高级特性与最佳实践> 需要掌握的东西,包括以下内容.判断对象存活还是死亡的算法(引用计数算法.可达性分析算法).常 ...

  7. Ql004(母牛的故事)

    一,看题目 1,这个虽然我不想说,但是我确实不会,但是我的意思是你可以不会但是不能每次都不会那咋办? 二,看题解 1,你得大概知道这个东西是考啥的(虽然这个东西提前给你说了是d递归),但是考试肯定没人 ...

  8. Shell里的特殊符号

    Shell里的特殊符号: (1)单引号: 由单引号括起来的符号都作为普通字符处理,他们都失去了特殊意义. (2)双引号: 除美元符号($).倒引号.反斜线(\)仍保留特殊含义外,其余符号都作为普通字符 ...

  9. monkey--常用参数

    前戏 参数分类:常规类参数,事件类参数,约束类参数,调试类参数 常规类参数:常规类参数包括帮助参数和日志信息参数,帮助参数用于输出monkey命令使用指导,日志信息参数将日志分为三个等级,级别越高,日 ...

  10. nuxt中localstorage的替代方案

    采用异步的方式进行存储数据,更高效快速,使用localforage是你最好的选择 具体转载自博客 Heap Stack Blog(pingbook.top) Nuxt storage data in ...