让div在body中任意拖动
HTML代码
- <div id="idOuterDiv" class="CsOuterDiv">
- </div>
CSS代码
- body {
- background-color:#232429;
- }
- .CsOuterDiv {
- width:256px;
- height:146px;
- background-color:white;
- position:absolute;
- top:50%;
- left:50%;
- transform:translateX(-50%) translateY(-50%);
- -moz-transform:translateX(-50%) translateY(-50%);
- -webkit-transform:translateX(-50%) translateY(-50%);
- -ms-transform:translateX(-50%) translateY(-50%);
- border-radius:5px;
- box-shadow:3px 3px 10px blue;
- }
JS代码
- function dragFunc(id) {
- var Drag = document.getElementById(id);
- Drag.onmousedown = function(event) {
- var ev = event || window.event;
- event.stopPropagation();
- var disX = ev.clientX - Drag.offsetLeft;
- var disY = ev.clientY - Drag.offsetTop;
- document.onmousemove = function(event) {
- var ev = event || window.event;
- Drag.style.left = ev.clientX - disX + "px";
- Drag.style.top = ev.clientY - disY + "px";
- Drag.style.cursor = "move";
- };
- };
- Drag.onmouseup = function() {
- document.onmousemove = null;
- this.style.cursor = "default";
- };
- };
- dragFunc("idOuterDiv");
让div在body中任意拖动的更多相关文章
- JavaScript中,让一个div在固定的父div中任意拖动
1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...
- JS中的拖动之—— ondragstart,ondrag,ondragend , ondragenter , ondragover , ondragleave, ondrop 的区别
关于 HTML5 中的拖动功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放.以下 我只做一下简介. 1 如果你想让元素变得可拖动,首先 你得对元素设置 draggable 属性 此属 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- 使用ARP欺骗, 截取局域网中任意一台机器的网页请求,破解用户名密码等信息
ARP欺骗的作用 当你在网吧玩,发现有人玩LOL大吵大闹, 用ARP欺骗把他踢下线吧 当你在咖啡厅看上某一个看书的妹纸,又不好意思开口要微信号, 用arp欺骗,不知不觉获取到她的微信号和聊天记录,吓一 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- 关于delphi点击webbrowser中任意一点的问题
关于delphi点击webbrowser中任意一点的问题 有时候我们需要delphi载入webbrowser1打开网页的时候 需要点击某一个点的位置 可能是坐标 可能是按钮 可能是其他的控件应该如何来 ...
- 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果
(国内知名Android开发论坛eoe开发者社区推荐:http://www.eoeandroid.com/) 在Android界面特效中如何做出和墨迹天气及UC中左右拖动的效果 相信这么多手机APP中 ...
- [百度]数组A中任意两个相邻元素大小相差1,在其中查找某个数
一.问题来源及描述 今天看了July的微博,发现了七月问题,有这个题,挺有意思的. 数组A中任意两个相邻元素大小相差1,现给定这样的数组A和目标整数t,找出t在数组A中的位置.如数组:[1,2,3,4 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
随机推荐
- 使用apache.tika判断文件类型
一. 判断文件类型一般可采用两种方式 1. 后缀名判断 简单易操作,但无法准确判断类型 2. 文件头信息判断 通常可以判断文件类型,但有些文件类型无法判断(如word和excel头信息的前几个字节是一 ...
- rhel6安装rabbitmq-sever
1.下载rabbitmq-sever3.7.7,我下的是RHEL/CentOS 6.x, 你的系统是哪个版本就下哪个https://github.com/rabbitmq/ Downloadson G ...
- python 文本全选
这个是一个控制框有效果 # encoding: utf-8 from Tkinter import * def printentry(event): print("click on" ...
- 进程及Python实现
进程杂谈 #进程就是正在执行的一个过程,是对正在运行程序的一个抽象 #进程由程序.数据集和进程控制块(最重要的,进程切换 状态如何保存,恢复和记录)组成 """ 进程调度 ...
- selenium 滚动条的滚动
如果是一个页面自带的滚动条(即网页的的滚动条) 可直接用js js="window.scrollTo(x,y);" x(横向),y(纵向)代表的就是位置 ,具体移动到哪里 ...
- java GC jvm 内存分布 和新生代,老年代,永久代,(详细)
如果大家想深入的了解JVM,可以读读周志明<深入理解Java虚拟机:JVM高级特性与最佳实践> 需要掌握的东西,包括以下内容.判断对象存活还是死亡的算法(引用计数算法.可达性分析算法).常 ...
- Ql004(母牛的故事)
一,看题目 1,这个虽然我不想说,但是我确实不会,但是我的意思是你可以不会但是不能每次都不会那咋办? 二,看题解 1,你得大概知道这个东西是考啥的(虽然这个东西提前给你说了是d递归),但是考试肯定没人 ...
- Shell里的特殊符号
Shell里的特殊符号: (1)单引号: 由单引号括起来的符号都作为普通字符处理,他们都失去了特殊意义. (2)双引号: 除美元符号($).倒引号.反斜线(\)仍保留特殊含义外,其余符号都作为普通字符 ...
- monkey--常用参数
前戏 参数分类:常规类参数,事件类参数,约束类参数,调试类参数 常规类参数:常规类参数包括帮助参数和日志信息参数,帮助参数用于输出monkey命令使用指导,日志信息参数将日志分为三个等级,级别越高,日 ...
- nuxt中localstorage的替代方案
采用异步的方式进行存储数据,更高效快速,使用localforage是你最好的选择 具体转载自博客 Heap Stack Blog(pingbook.top) Nuxt storage data in ...