运用DIV拖拽实现resize和碰撞检测
运用DIV拖拽实现resize和碰撞检测
Div由拖拽改变大小
当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式
用鼠标拖动右下角的小三角就可以对文本框的大小进行重新设置,于是我们试着在一个div中实现与上述相似的功能
先看布局
<style>
#div1 {
width:10px;
height:10px;
background:red;
position:absolute;
z-index:2;
bottom:0;
right: 0;
cursor: nw-resize;
background: url(images/drag_ico.gif);
}
#div2 {
position: relative;
width: 200px;
height: 150px;
background: #ccc;
}
.box {
position: absolute;
border: 1px dashed #000;
}
</style>
<div id="div2">
<div id="div1"></div>
</div>
用父元素div2代替“文本框”,用div1代替小三角,这里的定位,为后面的js实现方法打下了基础
JS的实现方法
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev) {
var oEvent = ev || event;
oDiv2.style.width = oEvent.clientX - disX + oDiv.offsetWidth + 'px';
oDiv2.style.height = oEvent.clientY - disY + oDiv.offsetHeight + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};
</script>
将小三角移动的x轴和y轴长度反应到其父元素的宽高上面,便得到了这样的效果
在拖动过程中检测两个div是否有重合
布局并不麻烦,两个div,定宽高、背景颜色即可
逆向思维:既然我们要检测div在运动过程中是否重合,那如果知道什么时候不重合,剩下的情况就是重合了,在这里,分析不重合的情况显然比分析重合的情况要容易
如图,当r1<l2, b1<t2, l1>r2, t2>b2,这四个条件只要有任意一个成立,都会导致两个div不重合,这里的t,l,b,r在下面的代码中有详细定义。
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev) {
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX - disX + 'px';
oDiv.style.top = oEvent.clientY - disY + 'px';
var l1 = oDiv.offsetLeft;
var r1 = l1 + oDiv.offsetWidth;
var t1 = oDiv.offsetTop;
var b1 = t1 + oDiv.offsetHeight;
var l2 = oDiv2.offsetLeft;
var r2 = l2 + oDiv2.offsetWidth;
var t2 = oDiv2.offsetTop;
var b2 = t2 + oDiv2.offsetHeight;
if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
oDiv2.style.backgroundColor = 'yellow';
} else {
// 发生碰撞的时候
oDiv2.style.backgroundColor = 'green';
}
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
运用DIV拖拽实现resize和碰撞检测的更多相关文章
- 实现Div拖拽
直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...
- html之div拖拽,html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 纯js实现DIV拖拽
写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...
- 案例:简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- div拖拽的问题
今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX, ...
- html --- javascript --- div --- 拖拽方块
当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...
- 原生js实现div拖拽+按下鼠标计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...
- 原生js实现div拖拽
十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- div拖拽缩放jquery插件编写——带8个控制点
项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...
随机推荐
- python字符串转义与正则表达式特殊字符转义
最近在自学python,字符串和正则表达式的特殊字符转义有点混淆,做个笔记简单总结一下. 1.普通字符串转义 在字符串中使用特殊字符时,要用反斜杠(\)转义字符.例如:'Let\'s go!',这里对 ...
- 【Winform开发2048小游戏】
先来看一下界面: 游戏帮助类 class GameCore { //游戏地图 private int[,] map = new int[4, 4]; //合并时用到的临时数组 private int[ ...
- sql server 2005 表master..spt_values
IF OBJECT_ID('tempdb..#t') IS NOT NULL DROP TABLE #tGOcreate table #t(id int identity,Dt varchar(10) ...
- C#Excel导出导入
using System; using System.Collections.Generic; using NPOI; using NPOI.HPSF; using NPOI.HSSF; using ...
- VS2013 快捷键 与 RESHARPER 冲突
1.VS设置工具-->选项-->环境-->键盘-->重置 2.RESHARPER -->Options-->Environment → Keyboard & ...
- Spring学习之优缺点
Spring 1.Spring工作机制及为什么要用? Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.Spring既是一个AOP框架,也是一IOC容器. SpringFrame ...
- Eclipse+EGit的配置注意点, 以及解决Github多个本地仓库之间的冲突
问题描述 不同本地仓库(e.g. Repo1, Repo2)之间同时修改一个文件时, 出现文件无法merge的情况. 具体表现为, 冲突(红色双向实心箭头)一直存在, 点pull没反应, 点push报 ...
- JQuery实战学习--在dreamweaver 8中配置Jquery自动提示
最近在学习jQuery,然后在网上找到了自动提示的方法,记之. 1,首先下载jQuery_API.mxp这个扩展文件. 2,打开DW,点击命令-->扩展管理-->文件-->安装扩展, ...
- JAVA之GUI编程窗体事件
package GUI; import java.awt.Button;import java.awt.FlowLayout;import java.awt.Frame;import java.awt ...
- yii2.0 控制器方法 视图表单 Form表单处理
假设我们在ArticleController.php下面的actionForm方法中来处理提交的表单 新建立一个 views/Article/article-form.php文件用来作为输入表单 &l ...