<!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>
无标题文档
</title>
<style type="text/css">
body{ margin: 0; padding:0;}
#drag{position: absolute;top:0; left:0; z-index: 9999;width: 400px;height: 300px;background: #CCC; border: 1px solid blue;font:normal lighter 15px/28px Verdana,sans-serif;}
#title{ background: #44cef6; height:28px;line-height: 28px; color: #fff; font-size: 15px; font-weight: bold; text-align: center; width: 100%; }
#layout{background: blue; display: none; filter: alpha(opacity=30); left: 0; opacity: 0.3; position: absolute;top: 0; z-index: 1; }
</style>
<script>
function getY(e) {
e = e || window.event; //标准化事件对象
return e.pageY ? e.pageY : (e.clientY + document.documentElement.scrollTop);
}
function getX(e) {
e = e || window.event;
return e.pageX ? e.pageX : (e.clientX + document.documentElement.scrollLeft);
} //获得鼠标的坐标值
function GapsX(elem) {
return !elem.offsetParent ? elem.offsetLeft : (elem.offsetLeft + GapsX(elem.offsetParent));
} //对象距窗口最左端的偏移量（包括由于滚动条隐藏的部分）
function GapsY(elem) {
return !elem.offsetParent ? elem.offsetTop : (elem.offsetTop + GapsY(elem.offsetParent));
} //对象距窗口最顶端的偏移量（包括由于滚动条隐藏的部分）
window.onload = function() {
var tit = document.getElementById('title');
var dragelem = document.getElementById('drag');
var layoutdiv = document.getElementById('layout');
tit.onmousedown = function(e) {
var x = getX(e) - GapsX(this);
var y = getY(e) - GapsY(this);
document.onmousemove = function(e) {
dragelem.style.left = getX(e) - x + 'px';
dragelem.style.top = getY(e) - y + 'px';
layoutdiv.style.display = 'block';
layoutdiv.style.width = document.body.offsetWidth + 'px';
if (document.body.offsetHeight < document.documentElement.clientHeight) {
layoutdiv.style.height = document.documentElement.clientHeight + 'px';
} else {
layoutdiv.style.height = document.body.offsetHeight + 'px';
}
}
}
document.onmouseup = function() {
document.onmousemove = null;
layoutdiv.style.display = '';
}
}
</script>
</head>
<body>
<div id="drag">
<div id="title">
title
</div>
<div id="content">
<p style="font-variant:small-caps">The font-variant value of the text is "small-caps". </p>
</div>
</div>
<div id="layout"></div>
</body>
</html>
分享到：
相关推荐
JavaScript可拖动层技术是网页开发中的一个重要组成部分，它允许用户通过鼠标操作在网页上移动元素，提升用户体验，尤其在创建交互式用户界面时显得尤为关键。这种技术基于JavaScript，一种广泛使用的客户端脚本语言...
在这个项目中，我们关注的是一个实现拖动层功能并且能够保存拖动后位置信息的解决方案。这个功能通常用于创建交互式用户界面，允许用户自定义布局或调整元素的位置。 首先，我们要理解"拖动层"的概念。在网页设计中...
在某些情况下，用户可以通过拖拽层来管理和组织数据，比如拖动卡片式任务到不同的分类中。这时，后台数据库需要实时同步这些变化，确保数据的一致性。 实现拖拽层布局，我们可以使用各种前端框架和库，例如jQuery ...
在IT行业中，自定义拖拽层是一种常见的交互设计技术，尤其在网页和应用程序中，它提供了用户友好的界面，使用户能够通过鼠标或触摸动作移动元素。本资源“仿Google自定义拖拽层”旨在模仿Google产品的拖拽层功能，为...
jQueryQQdrag是一个基于jQuery库实现的插件，它模仿了QQ空间中的模块拖动效果，使开发者能够轻松地为网页添加类似的功能。本文将深入探讨jQueryQQdrag的原理、使用方法以及实际应用。 首先，我们需要理解jQuery的...
"pc多层多区域拖拽"是一个专门针对这种需求设计的jQuery插件，它使得开发者能够轻松地为网页添加多层、多区域的拖放功能。下面将详细阐述这个插件的工作原理、特点以及如何使用。 首先，拖拽功能在现代网页应用中...
Bootstrap可拖拽弹出层是一种基于前端框架Bootstrap和jQuery实现的交互式UI组件。这个组件允许用户自定义和拖动弹出窗口，提供了一种非模态（非阻塞）的对话体验，使得用户可以在不关闭当前页面的情况下与弹出层进行...
本实例将深入探讨如何使用jQuery来实现动态添加层、拖动层以及移除层的功能，这对于创建交互式的Web应用程序至关重要。 ### 1. 动态添加层 动态添加层是指在网页运行时根据用户操作或特定条件创建新的HTML元素。...
"jQuery弹出可拖动层"是一个常见的功能需求，它结合了jQuery的强大功能和用户界面的交互性，使得创建弹出窗口并赋予其拖动能力成为可能。这种技术广泛应用于各种网页应用，如模态对话框、提示信息、表单验证等场景。...
"jQuery简单拖拽层"是一个功能，允许用户通过鼠标操作将页面上的元素（如div、图像等）拖动到不同的位置，增强用户交互体验。这个功能在创建可自定义布局、设置窗口位置或构建拖放式界面时非常有用。 实现jQuery...
本知识点将深入探讨如何使用JavaScript实现一个可拖动的层（DIV）。DIV作为一个常用的HTML元素，通常用于布局和组织网页内容。通过赋予其拖动功能，用户可以自由调整层的位置，提供更灵活的交互体验。 首先，我们...
在网页设计中，"仿3721拖动层网页布局"是一种常见的交互设计技术，它允许用户通过鼠标拖放操作来调整页面元素的顺序，从而实现个性化布局。这种技术在许多网站和应用中都有应用，例如个人主页、管理面板或者自定义...
在JavaScript编程中，创建一个可...通过掌握这些技术，开发者能够创建出一个在各种浏览器环境下都能流畅使用的可拖动弹出层。在实际开发中，可能还需要结合其他库，如jQuery或者React等，以简化代码并提高开发效率。
在“遮罩层的使用以及在Flash中的拖动”这个主题中，我们将特别关注如何使遮罩层具有拖动功能。这种功能常见于交互式界面设计中，例如滑块、窗口拖动等。实现可拖动遮罩层，我们需要以下几个步骤： 1. 创建遮罩层：...
在IT行业中，用户界面的交互性是至关重要的，而“拖动层”（Drag Layer）是一种常见的提升用户体验的技术。本文将深入探讨拖动层的使用，包括其原理、实现方式以及如何通过源码和工具来优化这一功能。 拖动层是指...
在IT行业中，实现“层的拖拽效果（带阴影效果）”是一项常见的交互设计任务，尤其是在网页和桌面应用开发中。这项技术提升了用户体验，让用户能够通过直观的拖放操作来移动界面元素。以下是对这个主题的详细解释： ...
根据提供的文件信息，我们可以分析并总结出与“可以拖动的层”的代码相关的知识点。这段代码涉及到了HTML、CSS以及JavaScript的基本用法，主要用于实现网页上元素的拖拽功能。下面将详细介绍这些知识点： ### 1. ...
在网页设计中，实现元素的拖放（Drag...通过以上步骤，你将能够创建一个基础的CSS+JavaScript层拖拽效果。随着对这两种技术的深入理解和实践，你还可以进一步优化性能，增加更多高级功能，如拖放目标检测、动画过渡等。
本项目的"images"文件夹可能包含了与这个拖拽和层控制相关的示例图片，如拖动前后的效果对比，或者是不同`z-index`设置下元素的显示状态。通过查看这些图片，开发者可以更直观地理解拖拽和层控制的工作原理及其在...
在jQuery中，可以使用`.dialog()`函数来创建这样的层，它可以自定义宽高、位置、样式等属性，并且支持拖拽，使用户能够根据需要调整窗口的位置。 拖拽功能的核心在于监听鼠标的`mousedown`、`mousemove`和`mouseup`...