实用工具小学数学练习字帖生成在线画板函数绘制拼音字母表在线词典黄历查询中国历史 Excel函数模拟请求 json格式化

栏目分类:

子分类:

名师互学网

名师互学网用户登录

快速导航

当前搜索

当前分类

前沿技术软件开发系统运维产品运营生活办公面试经验考试题库

实用工具

学习工具小学数学练习字帖生成在线画板函数绘制拼音字母表在线词典黄历查询亲戚关系计算安全期计算中国历史 Excel函数模拟请求 json格式化浏览器指纹

名师互学网 > IT > 软件开发 > Web开发 > JavaScript

javascript dragable的Move对象

JavaScript 更新时间：2026-03-30 05:35:40 发布时间：1852天前 IT归档最新发布模块sitemap 名妆网法律咨询聚返吧英语巴士网伯小乐网商动力

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
其中比较重要的代码：
复制代码代码如下:
var Move = {
$: function(id){
return (typeof id == "object") ? id : document.getElementById(id);
},
pageX: function(elem){ //获取目标elem的X坐标
return elem.offsetParent ? //如果能继续得到上一个元素，增加当前的偏移量并继续向上递归
elem.offsetLeft + this.pageX(elem.offsetParent) : elem.offsetLeft;
},
pageY: function(elem){ //获取目标elem的Y坐标
return elem.offsetParent ? elem.offsetTop + this.pageX(elem.offsetParent) : elem.offsetTop;
},
make: function(id){
var elem = this.$(id);
var oldXY = null;
var newXY = null;
var x = 0; //记录初始化是目标elem的x坐标
var y = 0; //记录初始化是目标elem的y坐标
var t = this;
elem.onmouseover = function(e){
this.style.cursor = "default";
}
elem.onmousedown = function(e){
e = e || window.event;
this.style.position = "absolute";
this.style.cursor = "move";
x = t.pageX(this);
y = t.pageY(this);
var that = this;
oldXY = {
x: e.clientX,
y: e.clientY
}; //获取鼠标在按下的时候的坐标
document.onmousemove = function(e){
e = e || window.event;
newXY = {
x: e.clientX,
y: e.clientY
}; //获取鼠标在移动过程中的坐标
that.style.left = (newXY.x - oldXY.x + x) + "px";
that.style.top = (newXY.y - oldXY.y + y) + "px";
that.style.zIndex = "100";
}
}
elem.onmouseup = function(e){
this.style.cursor = "default";
this.style.zIndex = "0";
document.onmousemove = function(e){ //在放开鼠标的时候覆盖掉mousemove事件函数
return;
}
}
}
}

转载请注明：文章转载自 www.mshxw.com

本文地址：https://www.mshxw.com/it/117910.html

上一篇 JavaScript 的方法重载效果

下一篇 Javascript array类数组操作方法

JavaScript相关栏目本月热门文章

热门相关搜索

路由器设置木托盘宝塔面板儿童python教程心情低落朋友圈 vim 双一流学科专升本我的学校日记学校西点培训学校汽修学校情书化妆学校塔沟武校异形模板西南大学排名最精辟人生短句 6步教你追回被骗的钱南昌大学排名清朝十二帝北京印刷学院排名北方工业大学排名北京航空航天大学排名首都经济贸易大学排名中国传媒大学排名首都师范大学排名中国地质大学(北京)排名北京信息科技大学排名中央民族大学排名北京舞蹈学院排名北京电影学院排名中国戏曲学院排名河北政法职业学院排名河北经贸大学排名天津中德应用技术大学排名天津医学高等专科学校排名天津美术学院排名天津音乐学院排名天津工业大学排名北京工业大学耿丹学院排名北京警察学院排名天津科技大学排名北京邮电大学(宏福校区)排名北京网络职业学院排名北京大学医学部排名河北科技大学排名河北地质大学排名河北体育学院排名

关于我们文章归档网站地图联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号：晋ICP备2021003244-6号