GVKun编程网logo

javascript实现鼠标拖动改变层大小的方法（javascript鼠标拖拽）

19

本文的目的是介绍javascript实现鼠标拖动改变层大小的方法的详细情况，特别关注javascript鼠标拖拽的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解jav

本文的目的是介绍javascript实现鼠标拖动改变层大小的方法的详细情况，特别关注javascript鼠标拖拽的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解javascript实现鼠标拖动改变层大小的方法的机会，同时也不会遗漏关于firefox中用javascript实现鼠标位置的定位_javascript技巧、JavaScript offset实现鼠标坐标获取和窗口内模块拖动、javascript 事件处理、鼠标拖动效果实现方法详解_javascript技巧、JavaScript 如何实现鼠标拖动画线功能？的知识。

本文目录一览：

javascript实现鼠标拖动改变层大小的方法（javascript鼠标拖拽）

javascript实现鼠标拖动改变层大小的方法（javascript鼠标拖拽）

本文实例讲述了javascript实现鼠标拖动改变层大小的方法。分享给大家供大家参考。具体实现方法如下：

rush:js;"> 拖动改变层的大小 <Meta content="text/html; charset=gb2312" http-equiv="Content-Type">

　

　

　

firefox中用javascript实现鼠标位置的定位_javascript技巧

firefox中用javascript实现鼠标位置的定位_javascript技巧

/** 
* 取得鼠标坐标 
* @return Position 
*/ 
function getMouseLocation(){ 
if(ns4||ns6){ 
mouseX = e.pageX; 
mouseY = e.pageY; 
} 
else{ 
mouseX = event.x + document.body.scrollLeft; 
mouseY = event.y + document.body.scrollTop; 
} 
return {x:mouseX,y:mouseY}; 
} 
在strict下document.body要改成document.documentElement 

JavaScript offset实现鼠标坐标获取和窗口内模块拖动

JavaScript offset实现鼠标坐标获取和窗口内模块拖动

offset

offset 即偏移量，使用 offset 系列相关属性可以 动态的 获取该元素的位置（偏移）、大小等，如：
元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注：返回的数值不带单位

offset 系列常用的属性包括：
    element.offsetParent
    返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回 body
    注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回的是带有定位的父级元素。
    element.offsetTop
    返回元素带有定位父元素上方的偏移
    element.offsetLeft
    返回元素带有定位父元素左边框的偏移
    element.offsetWidth
    返回自身包括 padding, 边框, 内容区的宽度，返回数值不带单位
    element.offsetHeight
    返回自身包括 padding, 边框, 内容区的高度，返回数值不带单位

offset 和 style 的区别

offset style
offset 可以得到任意样式表中的样式值 style 只能得到行内样式表中的样式值，无法获得内嵌样式
offset 系列获得的数值是没有单位的 style.width 获得的是带有单位的字符串
offsetWidth 包含 padding+border+width style.width 获得不包含 padding 和 border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值 style 属性是可读写属性，style.width 可以获取也可以赋值
只想要获取元素大小位置的时候，用 offset 更合适 要对元素样式进行修改的话，使用 style 更合适

案例一：实时展示鼠标的坐标

演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>鼠标位置获取-01</title>
		<style>
			.box {
				width: 500px;
				height: 500px;
				background-color: #55aaff;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<p>获取鼠标在盒子内坐标</p>
		<div></div>
		<script>
			// 在盒子中点击，想要获得鼠标距离盒子左右的距离
			// 实现：
			// 1. 获得鼠标在页面中的坐标，e.pageX, e.pageY
			// 2. 获得盒子到页面中的距离, box.offsetLeft, box.offsetTop
			// 3. 两者相减就能够获得鼠标在盒子中的坐标
			// 下面看实现过程吧！
			const box = document.querySelector(".box");
			box.addEventListener("mousemove", function(e) {
				// console.log(e.pageX, e.pageY);
				// console.log(box.offsetLeft, box.offsetTop);
				const x = e.pageX - this.offsetLeft;
				const y = e.pageY - this.offsetTop;
				box.textContent = `x: ${x}, y: ${y}`;
			});
		</script>
	</body>
</html>

案例二：拖动模块

演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块拖动-02</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .login,
      .modal {
        display: none;
      }
      .login {
        width: 512px;
        height: 280px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background-color: #fff;
        box-shadow: 0 0 20px #ddd;
        z-index: 999;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 998;
      }
      .login-content {
        margin: 100px auto;
        text-align: center;
      }
      .login-content h3:hover,
      .closeBtn:hover {
        cursor: pointer;
      }
      .closeBtn {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      .login h4 {
        margin-top: 10px;
      }
      .login h4:hover {
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div>
      <h3 id="openLogin">点击弹出模拟框</h3>
    </div>
    <div>
      <divid="closeBtn">关闭</div>
      <h4>点击我拖动吧</h4>
    </div>
    <div></div>
    <script>
      // 获取元素
      const login = document.querySelector(".login");
      const modal = document.querySelector(".modal");
      const closeBtn = document.querySelector("#closeBtn");
      const openLogin = document.querySelector("#openLogin");
      // 点击显示元素
      openLogin.addEventListener("click", () => {
        modal.style.display = "block";
        login.style.display = "block";
      });
      closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
        login.style.display = "none";
      });
      // 实现拖拽移动功能
      // 1. 鼠标按下获得鼠标在盒子内的坐标
      const loginHeader = document.querySelector(".loginHeader");
      loginHeader.addEventListener("mousedown", function (e) {
        const x = e.pageX - login.offsetLeft;
        const y = e.pageY - login.offsetTop;
        const move = function (e) {
          login.style.left = `${e.pageX - x}px`;
          login.style.top = `${e.pageY - y}px`;
        };
        // 2. 移动鼠标
        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", function () {
          document.removeEventListener("mousemove", move);
        });
      });
    </script>
  </body>
</html>

到此这篇关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动的文章就介绍到这了,更多相关JavaScript鼠标坐标获取和窗口内模块拖动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:
  • 基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)
  • 如何利用js根据坐标判断构成单个多边形是否合法
  • JavaScript使用canvas绘制坐标和线
  • JavaScript 空间坐标的使用
  • JavaScript实现捕获鼠标坐标
  • js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
  • JS图形编辑器场景坐标视口坐标的相互转换

javascript 事件处理、鼠标拖动效果实现方法详解_javascript技巧

javascript 事件处理、鼠标拖动效果实现方法详解_javascript技巧

先看看要拖动的层（模拟窗口）的效果图吧。


要实现的拖动效果：鼠标左键在窗口上方的标题栏上按下，同时移动鼠标，窗口跟着移动。
窗口：

复制代码 代码如下:





一点准备工作：
要让窗口能自由移动，那么窗口的定位（position）应该采用绝对定位（absolute）；
给窗口添加标题栏，这里使用一个放在窗口顶部的层实现，同时将标题栏的鼠标光标设置为拖动（move）形状（在chrome中拖动的时候，光标会变成文字光标，松开鼠标键后恢复）。
复制代码 代码如下:

#win {
position:absolute;
width:480px;
height:320px;
background-color:#d4d4d4;
border: 1px solid #4d4d4d;
}
#win_header {
width:480px;
height:48px;
background-color:#4d4d4d;
cursor:move;
}

定义一个工具函数，用来获取指定ID属性的元素：
复制代码 代码如下:

function $id(id) {
return document.getElementById(id);
}

定义一个浏览器核心标识isIE：
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;
获取到窗口元素及其标题栏：
复制代码 代码如下:

var win = $id("win");
var header = $id("win_header");

为了方便记录鼠标和窗口的位置信息，创建一个位置：
复制代码 代码如下:

var pos =function(x, y) {
this.x = x;
this.y = y;
};

给窗口设置一个初始位置（css的left值和top值）。
这里不知道是为什么，如果不使用js设置这两个属性，就取不到值，在CSS中指定了也不行。
复制代码 代码如下:

var originalpos = new pos(20, 20);

在拖动窗口的过程中，需要记录的值有：
鼠标按下时鼠标光标的位置
复制代码 代码如下:

var oldmouse =new pos(0, 0);

鼠标按下时窗口的位置
var oldpos = new pos(0, 0);
鼠标移动时窗口的新的位置
var newpos = new pos(0, 0);
设置窗口的初始位置
复制代码 代码如下:

win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";

又是因为浏览器的差异（IE和非IE），元素绑定事件处理函数的方法不同（IE使用attachEvent，非IE使用addEventListener），为了简化事件绑定的操作，定义一个事件绑定函数：
复制代码 代码如下:

function bind(ev, func) {
if(isIE) {
　　header.attachEvent("on" + ev, func);
} else {
　　header.addEventListener(ev, func, false);
}
}

在做好这些工作后，就可以开始处理鼠标事件了。
在这个程序中，只希望鼠标左键拖动窗口，其它键都不能，所以需要判断是否是鼠标左键按下。而这个判断会在几个函数中都使用到，所以提取出来到一个函数中，通过传入的参数（鼠标键值，即按下了哪个键）判断。在这里，需要注意浏览器间的差异：IE中鼠标左键的值是1，而非IE中值是0.
复制代码 代码如下:

function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
return true;
else
return false;
} else {
if(btn == 0)
return true;
else
return false;
}
}

拖动动作是在按下鼠标左键后移动来完成的。把这个动作分享开来，即是鼠标先触发了按下动作（mousedown），然后触发了移动动作（mousemove）。为了判断是否是真的在拖动还是只是鼠标从窗口上经过，设置一个变量来记录鼠标按下的状态：
var mousedown = false;
由于CSS中存在的兼容性问题，这里使用js来控制鼠标悬停在窗口标题栏上面的时候的颜色变化。
悬浮
复制代码 代码如下:

function over(e){
　　header.style.backgroundColor = "#5d5d5d";
}

离开
复制代码 代码如下:

function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有时候鼠标会在未松开的情况下离开窗口，
// 此时通过触发鼠标的松开事件来使窗口脱离鼠标的控制
up(e);
}

按下
在按下事件中，需要先判断是否按下的是鼠标的左键；
若是才记录鼠标和窗口此时的位置，否则不记录。
复制代码 代码如下:

function down(e) {
e = e || event;
if(!isLeftButton(e.button))
return;
mousedown = true;
oldmouse.x = e.clientX;
oldmouse.y = e.clientY;
oldpos.x = parseInt(win.style.left.replace("px", ""));
oldpos.y = parseInt(win.style.top.replace("px", ""));
}

松开
复制代码 代码如下:

function up(e) {
if(!isLeftButton(e.button))
return;
mousedown = false;
}

移动
这里就涉及到鼠标的两个事件：
按下和移动。当且仅当鼠标左键按下时，移动动作才有效。
窗口的新位置，是由鼠标在拖动状态下的移动距离（X和Y的距离）决定的。即：
新的鼠标位置送去按下左键时记录下的位置，得到一个距离，然后将窗口的位置加上鼠标移动的距离得到窗口的新位置。
复制代码 代码如下:

function move(e) {
if(!isLeftButton(e.button))
return;
if(mousedown) {
e =e || event;
newpos.x = e.clientX - oldmouse.x;
newpos.y = e.clientY - oldmouse.y
win.style.left = (oldpos.x + newpos.x) + "px";
win.style.top = (oldpos.y + newpos.y) + "px";
}
}

事件处理都写好了，最后来给元素绑定上吧，阿门！
复制代码 代码如下:

bind("mouseover", over);
bind("mouseenter", over);
bind("mouseout", out);
bind("mouseleave", out);
bind("blur", out);
bind("mousedown", down);
bind("mouseup", up);
bind("mousemove", move);

不过在FF中的拖动有问题，只能第一次正常拖动，后面就有点乱了！

JavaScript 如何实现鼠标拖动画线功能？

JavaScript 如何实现鼠标拖动画线功能？

javascript 如何实现鼠标拖动画线功能？

JavaScript 如何实现鼠标拖动画线功能？

摘要：鼠标拖动画线功能在许多项目中都十分常见，可以用于创建交互式图表、绘制草图等。本文将介绍如何使用 JavaScript 实现鼠标拖动画线功能，并提供具体的代码示例，帮助读者更好地理解和应用。

引言：
在 Web 开发中，常常需要实现一些交互性强的效果，而鼠标拖动画线功能便是其中一种常见的需求。通过鼠标拖动，我们可以在页面上绘制出一条线条，实现一些可视化效果，同时也可以用于一些绘图和拖拽操作。

方法和技术：
实现鼠标拖动画线功能需要以下几个主要的步骤：

立即学习“Java免费学习笔记（深入）”；

  1. 监听鼠标事件：使用 JavaScript 监听鼠标事件，包括鼠标按下、拖拽和释放等事件，以便在相应事件发生时执行相应的操作。
  2. 获取鼠标位置：在鼠标拖动时，需要获取鼠标的当前位置，以便在页面上绘制出相应的线条。可以利用 event 对象的 clientX 和 clientY 属性来获取当前的鼠标位置。
  3. 绘制线条：使用 HTML5 中的 Canvas 元素实现线条的绘制。通过设置起始点和终止点，可以使用 context 的 lineTo 方法在 Canvas 上绘制线条。
  4. 实时更新线条：在鼠标拖动过程中，需要不断更新线条的终止点位置，以实现实时的线条显示效果。可以使用 requestAnimationFrame 方法来实现动画效果。

代码示例：

// 创建一个 Canvas 元素
var canvas = document.createElement(''canvas'');
var context = canvas.getContext(''2d'');
document.body.appendChild(canvas);

// 定义起始点和终止点的坐标
var startX, startY, endX, endY;

// 监听鼠标按下事件
canvas.addEventListener(''mousedown'', function(event) {
  startX = event.clientX;
  startY = event.clientY;
  canvas.addEventListener(''mousemove'', drawLine);
});

// 监听鼠标释放事件
canvas.addEventListener(''mouseup'', function() {
  canvas.removeEventListener(''mousemove'', drawLine);
});

// 绘制线条的方法
function drawLine(event) {
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 获取鼠标当前位置
  endX = event.clientX;
  endY = event.clientY;

  // 绘制线条
  context.beginPath();
  context.moveTo(startX, startY);
  context.lineTo(endX, endY);
  context.stroke();
  context.closePath();
}

// 使用 requestAnimationFrame 实现动画效果
function animate() {
  requestAnimationFrame(animate);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.moveTo(startX, startY);
  context.lineTo(endX, endY);
  context.stroke();
  context.closePath();
}
animate();
登录后复制

结论：
通过上述代码示例，我们可以看到如何使用 JavaScript 实现鼠标拖动画线功能。通过监听鼠标事件、获取鼠标位置和使用 Canvas 绘制线条，我们可以实现一个简单而实用的鼠标拖动画线效果。读者可以根据自己的需求自行扩展和优化该代码示例，实现更多个性化的效果。

以上就是JavaScript 如何实现鼠标拖动画线功能？的详细内容，更多请关注php中文网其它相关文章！

今天关于javascript实现鼠标拖动改变层大小的方法和javascript鼠标拖拽的介绍到此结束，谢谢您的阅读，有关firefox中用javascript实现鼠标位置的定位_javascript技巧、JavaScript offset实现鼠标坐标获取和窗口内模块拖动、javascript 事件处理、鼠标拖动效果实现方法详解_javascript技巧、JavaScript 如何实现鼠标拖动画线功能？等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇javascript实时获取鼠标坐标值并显示的方法（js实时获取鼠标所在坐标）

下一篇javascript实现checkbox全选的代码（js checkbox全选）

相关文章