html中通过js鼠标移动元素教程之最清晰的重复性移动元素代码

最新推荐文章于 2022-03-10 18:07:12 发布

我是一株草我有三颗心

最新推荐文章于 2022-03-10 18:07:12 发布

阅读量357

点赞数

分类专栏：前端网站开发

本文链接：https://blog.csdn.net/weixin_44576310/article/details/90753502

版权

前端网站开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我的教程中的知识点功能必须强大代码也尽量最少，注释最多让学习者更容易懂

你们可以删除注释后直接添加到你的网页上，我也希望你能了解一下，我的注释是为了你的学习而不是你删除后直接添加的代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript">
   /*function用来声明函数的*/
function moveObj(obj) {
       /*obj是谁调用函数的并传了自己，那这个obj就是那个元素*/
obj.style.cursor = "move";
       /*cursor是光标
       url   需使用的自定义光标的 URL。
       注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
       default   默认光标（通常是一个箭头）
       auto   默认。浏览器设置的光标。
       crosshair   光标呈现为十字线。
       pointer   光标呈现为指示链接的指针（一只手）
       move   此光标指示某对象可被移动。
       e-resize   此光标指示矩形框的边缘可被向右（东）移动。
       ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
       nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
       n-resize   此光标指示矩形框的边缘可被向上（北）移动。
       se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
       sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
       s-resize   此光标指示矩形框的边缘可被向下移动（北/西）。
       w-resize   此光标指示矩形框的边缘可被向左移动（西）。
       text   此光标指示文本。
       wait   此光标指示程序正忙（通常是一只表或沙漏）。
       help   此光标指示可用的帮助（通常是一个问号或一个气球）。
       */
       /*当obj这个元素被鼠标点击的时候触发执行无名函数*/
obj.onmousedown = function(e) {
obj.style.position = "absolute";/*将位置设置为absolute（绝对定位）*/
var drag_x = 0;/*记录鼠标按下的x位置*/
var drag_y = 0;/*记录鼠标按下的y位置*/
var draging = true;/*用于判断鼠标是否被按下*/
var left = obj.offsetLeft;/*返回当前元素的相对水平偏移位置的偏移容器*/
var top = obj.offsetTop;/*返回当前元素的相对垂直偏移位置的偏移容器*/
if(typeof document.all !== "undefined") { //IE
drag_x = event.clientX;/*clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。*/
drag_y = event.clientY;/*clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。*/
           /*当鼠标移动时调用无名函数*/
document.onmousemove = function(e) {
if(draging === false) return false;/*当draging为假（false）赋值为假*/
obj.style.left = left + event.clientX - drag_x + "px";/*他自己的x偏移的位置加上鼠标的位置x减去点击的位置（他自己的位置加上移动距离值等于他的新位置*/
obj.style.top = top + event.clientY - drag_y + "px"/*他自己的y偏移的位置加上鼠标的位置y减去点击的位置（他自己的位置加上移动距离值等于他的新位置*/
}
} else { //FF,Chrome,Opera,Safari
drag_x = e.pageX;/*event.pageX 属性返回鼠标指针的位置，相对于文档的左边缘。提示：该事件属性通常与 event.pageY 属性一起使用。*/
drag_y = e.pageY;
           /*当鼠标移动时调用无名函数*/
document.onmousemove = function(e) {
if (draging === false) return false;
obj.style.left = left + e.pageX - drag_x + "px";
obj.style.top = top + e.pageY - drag_y + "px"
}
}
document.onmouseup = function() { draging = false; };/*当鼠标取消点击时执行*/
}
}
</script>
</head>
<body>

<div style="background-color:#BB484A; width:200px; height:30px;" οnmοuseοver="moveObj(this)">这个是可以拖动的层1</div>

<div style="background-color:#2B36FF; width:200px; height:30px;" οnmοuseοver="moveObj(this)">这个是可以拖动的层2</div>

</body>
</html>

我是一株草我有三颗心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中通过js鼠标移动元素教程之最清晰的重复性移动元素代码

我的教程中的知识点功能必须强大代码也尽量最少，注释最多让学习者更容易懂你们可以删除注释后直接添加到你的网页上，我也希望你能了解一下，我的注释是为了你的学习而不是你删除后直接添加的代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/h...
复制链接

扫一扫