<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域，如果是返回欲移动元素，负责返回null
var draggingObj=null; //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj=validateHandler(e);//验证是否为可点击移动区域
if(draggingObj!=null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;
case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
document.addEventListener('mousedown',mouseHandler);
document.addEventListener('mousemove',mouseHandler);
document.addEventListener('mouseup',mouseHandler);
},
disable:function(){
document.removeEventListener('mousedown',mouseHandler);
document.removeEventListener('mousemove',mouseHandler);
document.removeEventListener('mouseup',mouseHandler);
}
}
}
function getDraggingDialog(e){
var target=e.target;
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}
Dragging(getDraggingDialog).enable();
</script>
</body>
</html>
分享到：
相关推荐
这包括显示和隐藏对话框、设置对话框内容，以及最重要的，使对话框可拖动。可拖动功能通常通过监听鼠标事件（mousedown、mousemove、mouseup）来实现。当用户按下鼠标时，记录下初始的鼠标位置和对话框的位置，然后...
为了提高代码的复用性和维护性，开发者还可以将模拟对话框封装成一个可复用的组件。这样，只需要调用特定的函数或方法，就可以在任何需要的地方展示对话框，降低了代码的耦合度。 总的来说，模拟网页对话框是Web...
### 用鼠标拖动无标题栏HTML对话框窗口 #### 知识点解析： #### 1. 无标题栏HTML对话框概述 在Windows应用程序开发过程中，经常需要创建自定义对话框来显示特定的信息或者获取用户的输入。无标题栏HTML对话框是一...
在实现弹出窗口对话框时，首先我们需要创建一个隐藏的HTML结构，模拟对话框的样子。这通常包括一个背景遮罩层和一个可自定义内容的对话框容器。对话框可能包含标题、内容区域、按钮等元素。CSS用于设置样式，确保...
1. 图像编辑：在Photoshop、GIMP等图像处理软件中，颜色对话框是必不可少的，用于设定画笔、填充、图层等的颜色。 2. 网页设计：HTML和CSS中的颜色选择，可以精确控制网页元素的配色。 3. UI设计：界面按钮、背景...
在Windows XP系统中，这种对话框具有特定的样式和交互方式，包括可拖动的标题栏。在现代网页开发中，为了重现这种经典效果，开发者会利用JavaScript来模拟这些行为。 JavaScript，简称JS，是一种轻量级的解释型编程...
在IT行业中，jQuery是一款非常流行...不过，实际应用中，可能还需要考虑更多细节，比如对话框的可访问性、性能优化以及用户体验等。不断学习和实践是提升技能的关键，希望这篇讲解能对你理解jQuery弹出对话框有所帮助。
3. JavaScript文件：这些文件可能包含了处理用户交互、模拟操作系统行为的逻辑，比如点击按钮后弹出对话框，或者实现窗口拖拽等功能。 4. 图像资源：可能会包含各种图标、背景图片和其他图形元素，用于构建逼真的...
本案例中提到的插件可能是通过创建一个可浮动的div元素来模拟弹出层效果，并通过jQuery事件监听和DOM操作实现弹出、隐藏以及拖动功能。 拖动特效的实现主要依赖于jQuery的`mousedown`、`mousemove`和`mouseup`事件...
本资源"模拟一个弹出可拖动的层窗口源码(效果超酷)"正是利用了JavaScript来实现一个极具吸引力的交互式功能——可拖动的弹出层窗口。下面我们将深入探讨这一技术实现的关键知识点。 首先，让我们理解什么是弹出层...
以下是对给定文件信息的深入解析，旨在阐述如何通过层（即DIV元素）来模拟可移动的小窗口，并使其具备拖动与关闭的功能。 ### 1. 基础HTML结构 在给定的部分内容中，可以看到HTML文档的基本结构。其中，`<head>`...
同时，利用jQuery UI的`draggable`和`resizable`功能，可以让窗口变得可拖动和可调整大小，这与Windows窗口的行为非常相似。 在实际应用中，对话框的打开、关闭、最小化和最大化等操作都可以通过绑定事件和调用相应...
"可拖动、最小化和关闭的窗口"是一个典型的JavaScript应用场景，它涉及到网页元素的动态操作和用户交互。以下是对这个主题的详细解释： 1. JavaScript基础： JavaScript是一种广泛使用的编程语言，主要用于客户端...
如果一切正常，你将看到一个可交互的拖拽购物箱，用户可以通过拖放商品图片到购物箱图层来模拟购物体验。 值得注意的是，虽然这个例子使用了Dreamweaver的Behaviors，但实现拖拽效果还可以使用JavaScript库，如...
在这个“Div可拖动窗口，弹出提示消息窗口”的项目中，我们主要关注的是如何利用JavaScript来实现两个关键功能：一是使Div元素具备拖动和大小调整的能力，二是创建一个弹出的提示消息窗口，其效果类似于QQ的屏幕右下...
2. **JavaScript实现可拖动的div层**: 通过JavaScript可以控制HTML页面中的元素进行拖拽操作，通常这是通过监听鼠标的`mousedown`、`mousemove`和`mouseup`事件来实现。在这个模拟聊天窗口的示例中，头部区域的`...
2. jQuery UI：jQuery的扩展库，提供了多种可定制的UI组件，如日期选择器、对话框、滑块等。 3. DOM操作：如何在JavaScript中找到、修改和添加HTML元素，以便实现滑块的动态更新。 4. 事件处理：学习如何监听滑块的...
2. Chrome DevTools：虽然不是Firefox，但其提供的元素拖放模拟功能也可用于测试Firefox下的拖放行为。 3. Dragula：一个跨浏览器的拖放库，可以帮助简化拖放实现，支持Firefox。 总结，处理Firefox下的img元素拖拽...
4. **jQuery UI Dialog**：jQuery UI库提供了可定制的Dialog组件，可以创建模态或非模态对话框，支持拖动、调整大小等功能。 5. **Bootstrap Modal**：Bootstrap框架的Modal组件可以轻松创建响应式的弹出窗口，适用...
拖动功能在Web应用中常见于对话框、面板或者窗口组件，它允许用户自由调整这些元素的位置，提升操作的便利性。在Ajax环境中，拖动功能需要与JavaScript事件处理程序配合，监听鼠标按下、移动和释放事件，实时更新...