JavaScript 拖拽div : ev.clientX

最新推荐文章于 2022-07-06 19:17:53 发布
最新推荐文章于 2022-07-06 19:17:53 发布
阅读量231 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/July-/p/5774340.html
版权 
//鼠标拖动div1:鼠标按住div，在document上拖动
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.οnmοusedοwn=function(ev){
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;
    document.οnmοusemοve=function(ev){
        var oEvent=ev||event;
        oDiv.style.left=oEvent.clientX-disX+'px';
        oDiv.style.top=oEvent.clientY-disY+'px';
        oDiv.innerHTML = "ev.clientX : "+ ev.clientX +  "<br/>ev.clientY : "+ ev.clientY
                + "<br/> evOffsetX  : " +disX+ "<br/> evOffsetY  : " +disY
                +  "<br/> left  : " +  oDiv.style.left    +  "<br/> TOP : " +  oDiv.style.top ;

    }
    document.οnmοuseup=function(ev){
        document.οnmοusemοve=null;
        document.οnmοusedοwn=null;
    }
    return false;
}

　　

<body>
  <div id="div1" style=" position: absolute ;left: 20px; top:100px; background: yellowgreen ; width: 100px ; height: 100px "></div>
</body>

　　注意：

ev.offsetX
ev.clientX 
ev.pageX
ev.screenX

转载于:https://www.cnblogs.com/July-/p/5774340.html

bairan9926
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
JavaScript event兼容问题及ev.clientX左距离,ev.clientY上距离,及onmousemove移动事件
骑着猪猪去拍拖
06-08 1159
JavaScript event兼容问题及ev.clientX左距离,ev.clientY上距离,及onmousemove移动事件 #div1 { width:100px; height:100px; background-color:#72C39C; position:absolute } window.onload = function(){ var oDiv =
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 938
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
js event-事件对象和clientX,clientY
qq_35187942的博客
01-06 1181
event:事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的时候调用。飞机-黑匣子。 事件对象必须在一个事件调用的函数里面使用才有内容 事件函数：事件调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候 兼容： ie/chrome:event是一个内置全局对象 标准下（火狐...
javascript实现完美拖拽效果
10-24
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
用javascript做拖动布局的思路
10-28
在JavaScript中实现拖动布局是一项常见的交互设计任务，它可以增强用户对网页元素的操控感。以下是如何使用JavaScript来实现这一功能的详细步骤和关键知识点： 首先，我们需要了解基础的JavaScript事件处理。在这个...
JavaScript拖拽、碰撞、重力及弹性运动实例分析
01-19
本文实例讲述了JavaScript拖拽、碰撞、重力及弹性运动实现方法。分享给大家供大家参考，具体如下： js拖拽、碰撞与重力实现代码： [removed]=function () { var oDiv=document.getElementById('div1'); var lastX...
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
10-24
本文将深入讲解如何通过逐行分析代码来理解JavaScript拖拽的基本原理，以及解决常见的问题。首先，让我们回顾一下上期的拖拽雏形代码： ```javascript window.onload = function() { var oDiv = document....
js+html+css实现鼠标移动div实例.docx
01-19
这个实例主要展示了如何使用JavaScript来响应鼠标的移动事件，使一个HTML的`div`元素跟随鼠标移动，实现动态拖拽的效果。以下是对这个实例的详细解析： 首先，HTML部分创建了一个包含`divBody`、`divHead`、`...
JavaScript 获取鼠标坐标的方法
录事参军
09-16 1774
function mouseMove(ev)  {  ev= ev || window.event;  var mousePos = mouseCoords(ev);  //alert(ev.pageX);  document.getElementById("xPos").value = mousePos.x;  document.getElementById("yPos").valu
[JavaScript] 理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
DaftJayee的博客
09-17 2645
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有
ev的offsetX,pageX,clientX和screenX
anshaobiao6449的博客
11-23 364
event.offsetX、event.offsetY（相对事件发生的具体元素左上角的定位） 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。 event.clientX、event.clientY（相对可视区域左上角的绝对定位） 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件...
如何理解e.clientX和e.clientY e.screenX e.screenY
baidu_36681154的博客
09-01 1471
别人老是说e.clientX和e.clientY是可视区的坐标，后来我通过测试发现 e.clientX和e.clientY的坐标是你打开浏览器不是有一个方框吗？ 你可以用鼠标直接点到他的最左边看它是不是0，如果是则说明是鼠标点击的地方与浏览器左边的边界线的距离。 你再点击浏览器左上角你看是不是0,0如果是说明clientX与clientY就是鼠标点击的地方与浏览器左边，顶部的边界的距离。
jquery pagex与clientx
diantiaozhu8383的博客
03-04 261
<html lang="en"> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> </head&gt...
<template> <div class="container"> <div class="button" ref="buttonRef" :style="buttonStyle" @mousedown="startDrag" @touchstart="startDrag" > Button </div> </div> </template> <script> export default { data() { return { buttonIndex: 0, isDragging: false, initialPosition: { x: 0, y: 0 }, currentPosition: { x: 0, y: 0 } }; }, computed: { buttonStyle() { return { transform: `translate(${this.currentPosition.x}px, ${this.currentPosition.y}px)` }; } }, methods: { moveButton() { this.buttonIndex = Math.floor(Math.random() * 24); }, startDrag(event) { event.preventDefault(); // 计算初始位置 const boundingRect = this.$refs.buttonRef.getBoundingClientRect(); this.initialPosition = { x: event.clientX || event.touches[0].clientX, y: event.clientY || event.touches[0].clientY }; // 更新当前位置 this.currentPosition = { x: boundingRect.left, y: boundingRect.top }; // 监听移动和释放事件 window.addEventListener('mousemove', this.handleDrag); window.addEventListener('touchmove', this.handleDrag, { passive: false }); window.addEventListener('mouseup', this.stopDrag); window.addEventListener('touchend', this.stopDrag); }, handleDrag(event) { event.preventDefault(); // 计算移动距离 const clientX = event.clientX || event.touches[0].clientX; const clientY = event.clientY || event.touches[0].clientY; const deltaX = clientX - this.initialPosition.x; const deltaY = clientY - this.initialPosition.y; // 更新当前位置 this.currentPosition = { x: this.currentPosition.x + deltaX, y: this.currentPosition.y + deltaY }; }, stopDrag() { // 停止拖动，移除事件监听器 window.removeEventListener('mousemove', this.handleDrag); window.removeEventListener('touchmove', this.handleDrag); window.removeEventListener('mouseup', this.stopDrag); window.removeEventListener('touchend', this.stopDrag); } } }; </script> <style> .container { display: flex; align-items: center; justify-content: center; height: 100vh; } .button { width: 80px; height: 40px; background-color: #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: absolute; } </style> 执行时出现了以下错误[Vue warn]: Error in v-on handler: "TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function" (found at pages/Dragging/Dragging.vue:1) 22:21:10.359 TypeError: this.$refs.buttonRef.getBoundingClientRect is not a function怎么改正
最新发布
07-12
```javascript startDrag(event) { event.preventDefault(); // 计算初始位置 const boundingRect = this.$refs.buttonRef.$el.getBoundingClientRect(); // 其他代码... }, ``` 通过`this.$refs.buttonRef.$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值