根据鼠标位置偏移量来计算div的left和top。
<div id="popupDivCommon" class="ui-dialog" style="width:100%;height:100%;display:none;position: absolute;top:0px;left:0px;z-index: 103;" onmousemove="moveDiv()" onmouseup="endMoveDiv()">
<div id="topDivId" style="display:block;width:100%;height:100%;z-index: 104; position: absolute;top:0px;left:0px;background: grey;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);"></div>
<div style="left:20%;top:5%;height:3%;width:60%;position: relative;" class="ui-dialog-titlebar popup-div-bg" id= "barDiv" onmousedown="beginMoveDiv()">
<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" style="cursor: pointer;" onclick="closePopUpDivForNavigateAway()">
<span class="ui-icon ui-icon-closethick"/>
</a>
</div>
<div id="commonContentDiv" style="left:20%;top:5%;height:80%; width:60%; border: 1.2px solid #5c5c5c; position: relative; z-index: 106; background: white; overflow: auto;">
<p:outputPanel id="popupDivPanel">
<ui:insert name="popupDivCommon">
<ui:include src="blank.xhtml"/>
</ui:insert>
</p:outputPanel>
</div>
</div>
var divStartLeft;
var divStartTop;
var contDivStartLeft;
var contDivStartTop;
var curMouseX;
var curMouseY;
var drag = false;
function beginMoveDiv() {
var divStartLeftPer = document.getElementById('barDiv').style.left;
var divStartTopPer = document.getElementById('barDiv').style.top;
var divStartLeftPer2 = document.getElementById('commonContentDiv').style.left;
var divStartTopPer2 = document.getElementById('commonContentDiv').style.top;
var bodyWidth = document.body.clientWidth;
var bodyHeitht = document.body.clientHeight;
curMouseX = event.clientX;
curMouseY = event.clientY;
if (divStartLeftPer.indexOf('%') != -1) {
divStartLeft = divStartLeftPer.substring(0, divStartLeftPer.indexOf('%'))/100 * bodyWidth;
} else {
divStartLeft = divStartLeftPer.substring(0, divStartLeftPer.indexOf('px'));
}
if (divStartTopPer.indexOf('%') != -1) {
divStartTop = divStartTopPer.substring(0, divStartTopPer.indexOf('%'))/100 * bodyHeitht;
} else {
divStartTop = divStartTopPer.substring(0, divStartTopPer.indexOf('px'));
}
if (divStartLeftPer2.indexOf('%') != -1) {
contDivStartLeft = divStartLeftPer2.substring(0, divStartLeftPer2.indexOf('%'))/100 * bodyWidth;
} else {
contDivStartLeft = divStartLeftPer2.substring(0, divStartLeftPer2.indexOf('px'));
}
if (divStartTopPer2.indexOf('%') != -1) {
contDivStartTop = divStartTopPer2.substring(0, divStartTopPer2.indexOf('%'))/100 * bodyHeitht;
} else {
contDivStartTop = divStartTopPer2.substring(0, divStartTopPer2.indexOf('px'));
}
drag = true;
}
function moveDiv() {
if (!drag) {
return;
}
var mx = event.clientX;
var my = event.clientY;
document.getElementById('barDiv').style.left = parseInt(divStartLeft) + parseInt(mx - curMouseX) + 'px';
document.getElementById('commonContentDiv').style.left = parseInt(divStartLeft) + parseInt(mx - curMouseX) + 'px';
document.getElementById('barDiv').style.top = parseInt(divStartTop) + parseInt(my - curMouseY) + 'px';
document.getElementById('commonContentDiv').style.top = parseInt(divStartTop) + parseInt(my - curMouseY) + 'px';
}
function endMoveDiv() {
if (drag) {
drag = false;
}
}
分享到:
相关推荐
js实现div移动,代码很简洁明了 通过js 实现div的移动,代码量很少,,一看就明白的.
JS实现鼠标拖动div移动(附效果演示)
DIV移动组件JavaScript 可以控制层的移动
本下载包包括了3个js拖动特效,拖动DIV移动指定位置,一个实例是任意位置的拖动,不受限制,想拖动到哪里就拖动到哪里;另一个是指定位置的拖动,由左侧拖动到右侧指定位置,拖动结束后,左侧会少一个DIV,右侧新增...
一个简单的javascript小程序,用于网页设计中的div移动块、窗口、广告栏等。
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...
可以对不通区域的div进行互相拖动,已实现将重要功能拖到明显位置!
DIV移动,DIV停靠 WEB形式的 类似 千千静听,你可移动歌曲列表到任何位置! 当它靠近 千千静听主窗口,会自动停靠上去! 该程序 是自动停靠任何一个最近的 DIV层边上!
鼠标拖动DIV,DIV移动后加载后台JSON数据
jquerydiv 移动DIV,效果也很好,只是有点复杂。
DIV移动并排序JS效果,很不错支持横移,竖移动
纯js操作div移动、伸缩,支持快捷键 可在页面设置打开方式
jquer控制div移动并且改变大小
纯js操作div移动 伸缩,支持快捷键
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
树形结构 DIV移动 复选框 级联多选 时间回调 QQ群:32471237 也许程序还有需要修复的地方 所以期待你的修改建议 也期待你的技术分享 谢谢!!
一个很好用的javaScript写的小程序,可实现div的拖动、变形。解压后直接拷到程序中就可运行
仿google拖动div 的应用仿google拖动div 的应用
DiV层移动实例(纯JS仿赛我的个人小窝)
主要给大家介绍了如何利用原生js实现键盘控制div移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。