博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
event 事件div块的拖拽
阅读量:7299 次
发布时间:2019-06-30

本文共 1238 字,大约阅读时间需要 4 分钟。

			

  完整版 禁止上下左右 出界

			

  带虚线框的拖拽块

			

//当鼠标按下的时候虚线框的位置没变 所以要改变虚线框的位置

oBox.style.left = oDiv.offsetLeft +"px";
oBox.style.top = oDiv.offsetTop +"px";

document.body.appendChild(oBox);											document.onmousemove = function(ev){					var oEvent = ev || event;					var l = oEvent.clientX - disX; //块的x位置					var t = oEvent.clientY - disY;//块的y位置										if(l<0)					{						l = 0;					}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)					{						l = document.documentElement.clientWidth - oDiv.offsetWidth;					}					if(t <0)					{						t = 0;					}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight)					{						t = document.documentElement.clientHeight - oDiv.offsetHeight;					}					oBox.style.left =l +"px";					oBox.style.top = t +"px";									};								document.onmouseup = function(){					document.onmousemove = null;					document.onmouseup = null;										//oDiv的left top 等于 oBox的左边距					oDiv.style.left = oBox.offsetLeft +"px";					oDiv.style.top = oBox.offsetTop +"px";					//					鼠标离开清除虚线框					document.body.removeChild(oBox);				}					return false;//阻止火狐bug ff下拖拽空div会出现重影			}		}									

  

转载于:https://www.cnblogs.com/mingjixiaohui/p/5269455.html

你可能感兴趣的文章
<script type="text/template">是干什么的,为什么要把html写在js中? 这是什么编程语言风格,都能这样用吗?...
查看>>
hdu2196(树形dp)
查看>>
编辑框CEdit自动换行简单设置
查看>>
华为实习日记——第十九天
查看>>
awk用法小结
查看>>
你有没有忽略TextField的leftView这个属性
查看>>
A和B两个数组,删除B中与A重复的元素
查看>>
方格广搜
查看>>
match
查看>>
今日工作情况2
查看>>
一个学习简单网络技术的网站
查看>>
使用JQuery的get或post方法时出现页面没法手动刷新?
查看>>
MongoDB进阶
查看>>
python3csv与xlsx文件操作模块(csv、xlsxwriter)
查看>>
开启线程方式
查看>>
xdebug
查看>>
Css之 间距初始化
查看>>
lsnrctl启动报错,Linux Error: 29: Illegal seek
查看>>
IDEA github
查看>>
linux 驱动学习笔记05--文件系统与设备文件系统
查看>>