<!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=utf-8" />
<title>拖拽层</title>
<style type="text/css">
<!--
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}
div#loginDIV {
position: absolute;
width: 300px;
height: 150px;
background-color: #FFFF00;
z-index: 20;
}
div#loginTopDIV {
width: 100%;
height: 20px;
background-color: #FF0000;
cursor: move;
}
-->
</style>
</head>
<body>
<div id="loginDIV" style="top: 200px;left: 300px;display: block;">
<div id="loginTopDIV">Move</div>
<p style="text-align: center;">移动的试试</p>
</div>
<!-- 此段JS必须放在最后面 -->
<script language="javascript" src="drag.js"></script>
</body>
</html>
drag.js文件
var loginDIV = document.getElementById("loginDIV");
var loginTopDIV = document.getElementById("loginTopDIV");
loginTopDIV.onmousedown = Down;
var tHeight,lWidth;
function Down(e)
{
var event = window.event || e;
tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,""));
lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,""));
document.onmousemove = Move;
document.onmouseup = Up;
}
function Move(e) {
var event = window.event || e;
var top = event.clientY - tHeight;
var left = event.clientX - lWidth;
top = top < 0 ? 0 : top;
top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top;
left = left < 0 ? 0 : left;
left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left;
loginDIV.style.top = top + "px";
loginDIV.style.left = left +"px";
}
function Up() {
document.onmousemove = null;
}
分享到：
相关推荐
"jQuery简单拖拽层"是一个功能，允许用户通过鼠标操作将页面上的元素（如div、图像等）拖动到不同的位置，增强用户交互体验。这个功能在创建可自定义布局、设置窗口位置或构建拖放式界面时非常有用。 实现jQuery...
**jQuery拖动任意层** jQuery库为Web开发者提供了一种高效、简洁的方式来操作DOM（文档对象模型），并处理用户交互。在本示例中，我们将深入探讨如何利用jQuery实现网页上的层（通常指的是div元素）的拖动功能。这...
本文将深入探讨“简单实用的jQuery可拖动弹出层，遮罩层”这一主题，旨在帮助开发者了解如何利用jQuery实现这种功能。 首先，我们来解析标题中的关键词“jQuery可拖动弹出层”。jQuery是一个广泛使用的JavaScript库...
《jQueryQQdrag：实现QQ空间模块拖动效果详解》 在网页开发中，用户交互体验是至关重要的，其中，拖放（Drag and Drop）功能可以让用户以直观的方式操作页面元素，提升用户体验。jQueryQQdrag是一个基于jQuery库...
"简易鼠标任意拖拽层源码"提供了五个JavaScript实现的拖拽框架实例，旨在帮助开发者轻松创建可自由拖动的层，从而提升用户的交互体验。以下是对这些实例中的关键知识点的详细解释： 1. **Drag框架基础**：Drag框架...
仿google的拖拽层示例，以最简单的方式解读技术核心
"pc多层多区域拖拽"插件正是基于jQuery，通过一个简单的属性配置，就能实现复杂的拖放行为，极大地简化了开发流程。 该插件的核心特性包括： 1. **多层支持**：这意味着在同一个页面上，你可以创建多个层次的拖放...
2. 简单拖动层实现原理：在web开发中，实现拖动层的功能主要是通过监听鼠标事件来完成的。具体来说，需要监听鼠标的按下（mousedown）、移动（mousemove）和释放（mouseup）事件。在鼠标按下时记录初始位置，在鼠标...
本篇文章将详细探讨如何利用Div+CSS技术实现完美的层拖拽特效，这种特效常用于创建弹出层或可拖动的对话框，提升用户体验。 首先，要实现Div的拖拽功能，我们需要创建一个可拖动的Div元素，并为其添加CSS样式，使其...
本知识点将深入探讨如何使用JavaScript实现一个可拖动的层（DIV）。DIV作为一个常用的HTML元素，通常用于布局和组织网页内容。通过赋予其拖动功能，用户可以自由调整层的位置，提供更灵活的交互体验。 首先，我们...
在给定的文件`divDrag.htm`中，很可能是实现了一个简单的拖动层类示例。这个文件可能会包含HTML结构，用于展示可拖动的元素，以及相应的JavaScript代码，用于实现拖动功能。你可以通过查看这个文件来更深入地理解...
本资源"jquery鼠标拖动层DIV源代码精简整理版"提供了一个轻量级的解决方案，用于实现HTML元素（特别是DIV）的拖动功能。下面我们将深入探讨这一主题。 首先，`div`是HTML中的一个块级元素，常用来组织页面布局。...
本文将深入探讨如何使用jQuery实现一个简单的拖动层（draggable layer）效果，这是一种用户交互功能，允许用户通过鼠标点击并拖动元素在页面上移动。 首先，我们需要确保已经引入了jQuery库。这通常通过在HTML文件...
本项目的"images"文件夹可能包含了与这个拖拽和层控制相关的示例图片，如拖动前后的效果对比，或者是不同`z-index`设置下元素的显示状态。通过查看这些图片，开发者可以更直观地理解拖拽和层控制的工作原理及其在...
javascript div拖动层 ,代码简单。
"jQuery鼠标上下层拖动排序代码.zip"就是一个实例，它提供了一个利用jQuery实现的div容器中li元素的拖动排序功能，适用于创建可自定义排序的列表或布局。这个功能尤其对那些需要用户自由调整内容顺序的Web应用非常...
在这个项目中，“弹出有遮罩的拖动层，简单模拟select（未做界面）”是一个实例，它展示了如何利用这些技术实现一个功能性的UI组件。 首先，让我们详细了解这个项目的组成部分： 1. **遮罩层**：遮罩层是一种常见...
标题“jbox放大拖动层.rar”所指的是一款基于jQuery的插件——jBox，它主要用于实现网页上的可放大并能拖动的层（弹窗）效果。这个压缩包包含了一系列必要的文件来构建和使用这个功能。 1. **jBox.css**：这是jBox...
在JavaScript的世界里，拖动层（Draggable Layer）是一种常见的交互设计，它允许用户通过鼠标或触屏设备来移动页面上的元素。这种技术在许多Web应用和网站中都有广泛的应用，比如Google的一些产品就采用了这样的设计...
总的来说，layer.js是一个强大且灵活的JavaScript插件，它通过简单的API调用即可实现可拖动的图片弹出层功能。无论是对于个人开发者还是企业项目，都能有效提升网页的交互性和用户体验。在实际使用中，开发者应结合...