<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div move</title>
</head>
<body>
<div id="movID"
style="border:1px dashed blue; width: 500px; height: 500px; left:50px; top:50px; position :absolute; zIndex: 2001; background-color: #FFFFFF;">
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("movID");
div.onmousedown = function(event){
fDragging(div, event, false);
}
}
function fDragging(obj, e, limit) {
if (!e) e = window.event;
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
var x_ = e.clientX - x;
var y_ = e.clientY - y;
if (document.addEventListener) {
document.addEventListener('mousemove', inFmove, true);
document.addEventListener('mouseup', inFup, true);
} else if (document.attachEvent) {
document.attachEvent('onmousemove', inFmove);
document.attachEvent('onmouseup', inFup);
}
inFstop(e);
inFabort(e);
function inFmove(e) {
var evt;
if (!e) e = window.event;
if (limit) {
var op = obj.parentNode;
var opX = parseInt(op.style.left);
var opY = parseInt(op.style.top);
if ((e.clientX - x_) < 0) return false;
else if ((e.clientX - x_ + obj.offsetWidth + opX) > (opX + op.offsetWidth)) return false;
if (e.clientY - y_ < 0) return false;
else if ((e.clientY - y_ + obj.offsetHeight + opY) > (opY + op.offsetHeight)) return false;
}
obj.style.left = e.clientX - x_ + 'px';
obj.style.top = e.clientY - y_ + 'px';
inFstop(e);
}
function inFup(e) {
var evt;
if (!e) e = window.event;
if (document.removeEventListener) {
document.removeEventListener('mousemove', inFmove, true);
document.removeEventListener('mouseup', inFup, true);
} else if (document.detachEvent) {
document.detachEvent('onmousemove', inFmove);
document.detachEvent('onmouseup', inFup);
}
inFstop(e);
}
function inFstop(e) {
if (e.stopPropagation) return e.stopPropagation();
else return e.cancelBubble = true;
}
function inFabort(e) {
if (e.preventDefault) return e.preventDefault();
else return e.returnValue = false;
}
}
</script>
</html>
分享到：
相关推荐
【标签】"js div move"进一步强调了JavaScript对div元素的移动操作，这通常涉及到DOM操作和动画技术。 【压缩包子文件的文件名称列表】中，"index.html"是网页的主文件，包含HTML结构和可能内嵌的JavaScript代码；...
在JavaScript（JS）中，实现一个可任意拖拽的弹出div是一项常见的需求，尤其在构建交互式Web应用时。这个功能可以增加用户界面的动态性和用户体验。下面将详细介绍如何利用JavaScript来实现这一功能。 首先，我们...
本示例“move_div.rar_javascript 拖动”聚焦于一个常见的JavaScript应用场景：实现用户可以通过鼠标拖动HTML元素，如div图层，以进行自定义布局。这个功能在现代网页设计中非常常见，例如浮动对话框、可调整大小的...
在.NET环境中，我们可以结合JavaScript（JS）来实现HTML元素，如div的拖拽功能。这是一种增强用户交互体验的常见技术，让用户可以通过鼠标操作在页面上移动特定的元素。下面我们将详细探讨如何实现这一功能。 首先...
综上所述，这个JS拖拽DIV示例涉及到了JavaScript事件处理、DOM操作、CSS定位以及可能的服务器通信，这些都是前端开发者必备的技能。理解并掌握这些知识，对于创建交互式、响应式的Web应用至关重要。
接下来是关键部分——JavaScript代码（在div.js中）。我们需要监听鼠标事件，实现窗口的拖动功能： ```javascript var draggableWindow = document.getElementById('draggableWindow'); var isDragging = false; ...
CSS+JS 实现 DIV 层的展开折叠效果 本文将详细介绍如何使用 CSS 和 JS 实现一个 DIV 层的展开折叠效果。这个效果可以在网页上实现一个折叠的样式，用户可以点击按钮来展开或折叠内容。 HTML 结构 首先，我们需要...
综上所述，"move-div.rar_DVI"是一个涉及到前端交互设计、动态CSS定位、JavaScript事件处理、DOM操作和性能优化的项目，展示了作者在网页动态效果和用户体验方面的专业技能。通过分析和学习这个项目，开发者可以提升...
在这个名为“move_div”的项目中，可能包含了实现这一功能的完整代码示例，包括HTML、CSS和JavaScript文件。通过学习和理解这些代码，开发者可以了解到如何将静态的 `div` 转变为可拖动的元素，从而提升网站或应用的...
JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计，常用于网页上的可操作元素，如窗口、面板或自定义控件。以下是对这个实例的详细解析： 首先，我们需要一个包含拖拽功能的 Div 元素。在 HTML 中，我们...
本教程将深入探讨如何通过JavaScript手动操作`div`区块，以实现动态效果和交互性，帮助你更好地理解和运用JavaScript。 一、创建与插入`div` 在HTML中，你可以直接编写`<div>`标签来创建一个区块。例如： ```html ...
最后，需要注意的是，对于复杂的图片切换效果，可以考虑使用现有的JavaScript库或框架，如jQuery、React或Vue.js，它们提供了丰富的API和组件，能简化开发过程并提高代码可维护性。 总之，JavaScript的`mouseover`...
这个例子中的`DIVMove`文件可能包含了实现上述功能的HTML、CSS和JavaScript代码，供学习者参考和实践。在`.NET`环境中，这些前端技术通常与ASP.NET或其他Web应用程序框架结合使用，提供动态交互的用户界面。 总结来...
我们将基于标题“div拖拽 关键在于对谁添加onmousemove事件”以及描述中的实例，来解析这个功能的关键点，并通过标签“javascript”，“div”，“拖拽”来延伸相关的JavaScript和HTML知识。 首先，让我们关注核心...
本文将深入探讨如何使用JavaScript实现这一功能，让页面上的DIV元素变得可任意拖动。 首先，我们需要创建一个HTML结构，包含一个我们可以拖动的DIV元素。这个元素通常会有一个特定的类名或ID以便于JavaScript找到并...
JavaScript（简称JS）是一种广泛用于前端开发的编程语言，它能赋予网页动态功能，使得用户与页面交互变得更加直观和有趣。在本主题中，我们将深入探讨如何使用纯JavaScript实现div元素的拖动功能。 首先，我们需要...
在本文中，我们将深入探讨`jquery.dad.js`这个JavaScript库，它主要用于实现HTML `div`元素的拖拽排序功能。这个库简化了在网页上创建动态可排序列表的过程，适用于那些希望用户能够通过直观的拖放操作来调整元素...