根据鼠标位置偏移量来计算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;
}
}
分享到:
相关推荐
本项目探讨的核心是“div移动并且排序的代码”,这意味着我们将在一个交互式的环境中,允许用户通过拖放操作来调整`div`元素的位置,从而实现页面布局的动态调整。这种功能通常涉及到JavaScript和CSS3技术,特别是...
在JavaScript中,实现鼠标拖动div移动的效果是前端开发中常见的交互设计,它涉及到DOM操作、事件处理以及坐标计算等多个知识点。以下将详细介绍这个过程。 首先,我们需要理解`div`在HTML中的作用。`div`元素是块级...
在网页设计中,"div移动块"是一种常见的技术,它允许开发者创建可移动的元素,如窗口、广告栏或其他互动式界面组件。这种技术主要基于HTML的`<div>`元素结合JavaScript来实现,使得用户可以通过点击或拖动来改变元素...
js实现div移动,代码很简洁明了 通过js 实现div的移动,代码量很少,,一看就明白的.
本下载包包括了3个js拖动特效,拖动DIV移动指定位置,一个实例是任意位置的拖动,不受限制,想拖动到哪里就拖动到哪里;另一个是指定位置的拖动,由左侧拖动到右侧指定位置,拖动结束后,左侧会少一个DIV,右侧新增...
// 执行div移动或伸缩的代码 } }); ``` 为了支持多种快捷键组合,可以检查`event.ctrlKey`, `event.shiftKey`, `event.altKey`等属性来判断是否按下了Ctrl、Shift或Alt键。 在实际项目中,你可能还需要处理边界...
当DIV移动到特定位置或满足某个条件时,如到达边界或停顿一段时间,我们可以发送一个AJAX请求到后台服务器,请求JSON格式的数据。 6. **AJAX请求**:使用`XMLHttpRequest`对象或jQuery的`$.ajax()`函数发送HTTP请求...
"jquerydiv 移动DIV"这个标题指的是利用jQuery来实现对网页中DIV元素的动态移动效果。虽然jQuery使得创建复杂的动画变得相对容易,但有时候可能涉及到的代码会比较复杂,尤其是当需要实现特定的交互或过渡效果时。 ...
本文将详细探讨"DIV移动并排序JS效果"这一主题,包括其核心概念、实现方法以及实际应用。 一、核心概念 1. DIV元素:在HTML中,`<div>` 是一个用于组合其他 HTML 元素的容器,它本身没有特定的语义,但可以用于...
下面,我们将深入探讨这个主题,并结合“描述”中的“值得拥有”,来展示jQuery在处理div移动上的强大功能。 首先,让我们了解基础。在HTML中,div是一个块级元素,常用于组织页面结构。要移动一个div,我们需要...
例如,当div移动和大小改变完成后显示一条消息: ```javascript myDiv.animate({ // 动画属性... }, 2000, function() { alert("动画已完成!"); }); ``` 此外,jQuery还提供了`stop()`方法来停止当前运行的动画...
DIV移动,DIV停靠 WEB形式的 类似 千千静听,你可移动歌曲列表到任何位置! 当它靠近 千千静听主窗口,会自动停靠上去! 该程序 是自动停靠任何一个最近的 DIV层边上!
以上就是使用纯JavaScript操作div移动、伸缩以及支持快捷键的基本方法。通过这种方式,你可以创建出动态、交互丰富的Web界面。记住,实践是检验真理的唯一标准,动手编写代码并进行测试是掌握这些技能的关键。在实际...
`DIV` 移动组件是利用 JavaScript 实现的一种交互效果,允许用户通过编程方式控制 `DIV` 层的位置,为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...
本项目“DIV移动例子”提供了一个学习和实践`DIV`动态效果的资源,通过解压文件并打开HTML文件,我们可以看到五个不同的示例,这些示例展示了如何在网页上实现`DIV`元素的动态移动。 1. **基础的CSS定位** `DIV`...
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能,允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素,如窗口、面板或者任何需要动态...
在"DIV移动布局"中,关键在于使用JavaScript来赋予DIV元素拖动的功能。JavaScript是一种客户端脚本语言,它可以与用户的交互行为进行实时响应,比如鼠标点击和移动。这里提到的"Drag.js"可能就是实现这一功能的脚本...
树形结构 DIV移动 复选框 级联多选 时间回调 QQ群:32471237 也许程序还有需要修复的地方 所以期待你的修改建议 也期待你的技术分享 谢谢!!
键盘控制div移动并且解决停顿问题 /*设置div样式*/ div{ width:100px; height:100px; background:#68affc; position:absolute; left:100px; top:100px; } //当页面加载完后 window.onload=function(){ //...