鼠标拖拽窗口效果(不允许拖出屏幕的可视区域)
2017-08-25 10:59
274 查看
html样式
<body> <div id="div1"></div> </body>
css样式
#div1 { width: 200px; height: 200px; background: #deb887; position: absolute; }
JS样式
window.onload = function (){ var oDiv = document.getElementById('div1') var disX = 0; var disY = 0; oDiv.onmousedown = function (ev){ var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev){ var oEvent = ev||event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; //此处的判断是为了防止拖拽框被拖出屏幕可视区域 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; } oDiv.style.left = l+ 'px'; oDiv.style.top = t+ 'px'; }; //此处是为了防止在火狐浏览器下拖拽时会出现的两次阴影的效果,此处代码可以禁用 document.onmouseup = function (){ document.onmousemove = null; document.onmouseup = null; } } }
其实原理就是实时计算区域框 距离左右屏幕之间的距离,通过鼠标的点击、拖动、移除 事件来对区域框进行操作。在不同的条件下作出不同的判断就可以了 ~
相关文章推荐
- 可视区域内鼠标拖拽框
- [置顶] 仿百度首页登陆框拖拽效果(可视窗口内拖动)
- VC禁止或允许拖拽改变窗口尺寸
- 判断鼠标动作,可以给鼠标在标签不同区域的动作分别写不同的效果
- iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽(改变大小/最小化/最大化/还原/关闭)
- ubuntu屏幕截图工具:scrot,可截鼠标拖曳的矩形区域图形
- [转]百度空间中实现拖拽、悬浮窗口效果的popup.js分析
- 【转】(vc)使用CToolTipCtrl让鼠标提示窗口跟着鼠标在屏幕上移动
- 鼠标拖拽效果的实现
- jquery鼠标拖拽效果分享
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
- div背景半透明,覆盖整个可视区域的遮罩层效果(转)
- ubuntu屏幕截图工具:scrot,可截鼠标拖曳的矩形区域图形
- JS 获取浏览器、屏幕和可视区域宽高
- Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()
- 实现鼠标的拖拽效果 by johannes
- div背景半透明 覆盖整个可视区域的遮罩层效果
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- 浏览器窗口可视区域大小
- ubuntu屏幕截图工具:scrot,可截鼠标拖曳的矩形区域图形