一个简单的拖动层(兼容IE,FF)
Code<!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>
<title>拖动层</title>
<style type="text/css">
.main
{
position: absolute;
background-color: #fff;
top: 100px;
left: 100px;
z-index: 101;
border: solid 1px #ccc;
}
.titlebar
{
background-color: #ccc;
cursor: move;
height: 20px;
color: #fff;
font-size: 13px;
padding-top: 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="main" class="main" style="width: 500px; height: 350px;">
<div id="titlebar" class="titlebar">
拖动层
</div>
<div id="Div1" class="main" style="width: 200px; height: 50px;">
<div id="Div2" class="titlebar">
拖动层2
</div>
</div>
</div>
<script type="text/javascript">
new drag("main", "titlebar");
new drag("Div1", "Div2");
function drag(main, titlebar) {
var obj = document.getElementById(main);
var title = document.getElementById(titlebar);
if(obj && title)
{
var posX;
var posY;
var offset = 10;
var mousemove = function(evt) {
if (evt == null) evt = window.event;
var left = evt.clientX - posX;
var top = evt.clientY - posY;
var limitLeft = 0;
var limitTop = 0;
if(obj.parentNode.nodeName != "BODY")
{
limitLeft = obj.parentNode.clientWidth - obj.clientWidth - offset;
if(limitLeft < left)
{
left = limitLeft;
}
limitTop = obj.parentNode.clientHeight - obj.clientHeight - offset;
if(limitTop < top)
{
top = limitTop;
}
}
else
{
limitLeft = window.screen.availWidth - obj.clientWidth - offset;
if(limitLeft < left)
{
left = limitLeft;
}
limitTop = window.screen.availHeight - obj.clientHeight - offset;
if(limitTop < top)
{
top = limitTop;
}
}
if(left < offset)
{
left = offset;
}
if(top < offset)
{
top = offset;
}
obj.style.left = left + "px";
obj.style.top = top + "px";
}
title.onmousedown = function(evt) {
if (!evt) evt = window.event;
posX = evt.clientX - obj.offsetLeft;
posY = evt.clientY - obj.offsetTop;
document.onmousemove = mousemove;
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
else
{
alert("参数错误!");
}
}
</script>
</body>
</html>
分类:
3、客户端编程
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）