跟着别人学习的一个个拖动层
<script>
function objectDrapDrop(obj){
var me = this;
this.foo = (typeof obj == 'string') ? document.getElementById(obj) : obj;
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e || event;
if(e.layerX){
foo.oOffset = {x:e.layerX, y:e.layerY};
} else {
foo.oOffset = {x:e.offsetX, y:e.offsetY};
}
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false;}
}
this.drag = function(e){
var foo = me.foo;
e = e || event;
foo.style.top = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - foo.oOffset.y + 'px';
foo.style.left = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - foo.oOffset.x + 'px';
}
this.drop = function(e){
e = e || event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
}
}
window.onload = function(){
var test1 = new objectDrapDrop('foo');
}
</script>
</head>
<body>
<div id="foo">This is a div!</div>
</body>
function objectDrapDrop(obj){
var me = this;
this.foo = (typeof obj == 'string') ? document.getElementById(obj) : obj;
this.foo.onmousedown = function(e){
var foo = me.foo;
e = e || event;
if(e.layerX){
foo.oOffset = {x:e.layerX, y:e.layerY};
} else {
foo.oOffset = {x:e.offsetX, y:e.offsetY};
}
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false;}
}
this.drag = function(e){
var foo = me.foo;
e = e || event;
foo.style.top = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - foo.oOffset.y + 'px';
foo.style.left = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - foo.oOffset.x + 'px';
}
this.drop = function(e){
e = e || event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
}
}
window.onload = function(){
var test1 = new objectDrapDrop('foo');
}
</script>
</head>
<body>
<div id="foo">This is a div!</div>
</body>
没有多大实际的意思，同样里边的有些东西，没有搞懂。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述