html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时，光标会走出方块，所以把事件注册在了方块的父节点上，
如有疑问请参照：http://blog.csdn.net/a9529lty/article/details/2708171
使用了 IntelliJ IDEA 的html编辑器，推荐大家使用
多说无益，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖拽div</title>
</head>
<body>
<div id="background" style="width:800px;height:450px;background-color:lightblue">
<div id="drag_div" style="width:50px;height:50px;background-color:red"></div>
</div>
<script>
var background = document.querySelector("#background");
var div1 = background.querySelector("#drag_div");
var dragable = false;
div1.onmousedown = function(event){
var thisP = {X : this.offsetLeft, Y : this.offsetTop};
var eventP = {X : event.pageX, Y : event.pageY};
dragable = true;
var this_outer = this;
this.parentNode.onmouseup = function(event){
dragable = false;
this.onmouseup = null;
this.onmousemove = null;
}
this.parentNode.onmousemove = function(event){
if(dragable){
this_outer.style.position = "absolute";
var currentP = {X : event.pageX, Y : event.pageY};
this_outer.style.left = currentP.X - eventP.X + thisP.X + "px";
this_outer.style.top = currentP.Y - eventP.Y + thisP.Y + "px";
}
}
}
</script>
</body>
</html>
运行结果如下，童鞋们可以把上面的代码拷贝到文本文档里另存为html格式， 然后用浏览器打开就可以看到结果了 ！
html --- javascript --- div --- 拖拽方块的更多相关文章
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- javascript鼠标拖拽的那些事情
<html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- Javascript之拖拽库
在手机上运行触屏拖动时,我发现页面并没有反应,服务器端执行javascript在手机端与电脑端不能“相同式”实现(电脑端运行正常,而手机端不一样),这是为甚么呢? 首先,我们都知道javascript ...
随机推荐
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- MS WORD 表格自动调整列宽，自动变漂亮，根据内容自动调整 .
在MS WORD中,当有大量的表格出现时,调整每个表格的的高和宽和大小将是一件非常累的事情,拖来拖去,非常耗时间,而且当WORD文档达到300页以上时,调整反应非常的慢,每次拖拉线后,需要等待一段时间 ...
- 下载的时候如果文件名是中文就变成zip.zip
struts2 /WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- Matlab多个Figure图合成一个Fig
案例:之前跑过的程序 已经生成了多个matlab图,现在需要进行合并到一个图中. 解决方案,利用图像句柄把figure图像中的参数读入到内存中,然后重新subplot绘制. 程序如下: clc;cle ...
- Oracle INV - SO line backorder API
--Sales Order Lines to backorder API--===================================--SET serveroutput on size ...
- Client-Side UI Automation Provider - WinForm Sample
Client-Side UI Automation Provider - WinForm Sample 2014-09-15 源代码 目录 引用程序集实现提供程序接口分发客户端提供程序注册和配置客户 ...
- Codeforces Round #272 (Div. 2) D. Dreamoon and Sets （思维 数学 规律）
题目链接 题意: 1-m中,四个数凑成一组,满足任意2个数的gcd=k,求一个最小的m使得凑成n组解.并输出 分析: 直接粘一下两个很有意思的分析.. 分析1: 那我们就弄成每组数字都互质,然后全体乘 ...
- 转:ORACLE的JDBC连接方式:OCI和THIN
oracle的jdbc连接方式:oci和thin oci和thin是Oracle提供的两套Java访问Oracle数据库方式. thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracl ...
- jsp之jsp基础
1. Jsp生命周期 客户端第一次请求->web容器把jsp文件转译为servlet源文件(java)->编译为class文件->载入class文件生成servlet对象 2. Js ...
- Chrome 快捷键使用
窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl 键,然后点击链接 在新标签页中打开链接 按住 Shift 键,然后点击链接 在新窗口中打开链接 Alt+F4 关闭当前窗口 Ctrl+ ...