JS之拖拽与碰撞检测

最新推荐文章于 2024-08-10 07:23:16 发布

liurongsheng123

最新推荐文章于 2024-08-10 07:23:16 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： ev pageX clientY offsetX pageY

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79574447

版权

本文介绍了如何在JavaScript中实现元素的拖拽功能，并详细讲解了如何在拖拽过程中进行碰撞检测，包括ev事件、clientX/Y和offsetX/Y等关键属性的使用，以及拖拽和碰撞检测的代码示例和实际效果展示。

摘要由CSDN通过智能技术生成

ev

为什么事件函数中有一个参数(ev)?
因为ev是事件的参数,在ev中包含了事件触发时的参数,比如click事件中的
ev.pageX,ev.pageY,keydown事件中的ev.keyCode等
在ie中.ev是全局的,可以通过windows.event来获取,在其它浏览器中,都是作为参数传入的,所有好多事件函数都这样写
myDiv.onclick = function(ev){
    if(!ev){
        ev=window.event;
    }//if语句也可以简写成:ev=window.event||ev
}
这句话的用途:需要获取和事件相关的信息时使用,如
1.获取键盘按下或者弹起的按键
2.获取鼠标的位置坐标
3.获取事件名称
4.获取事件当前的传播阶段
5.获取事件生成的日期时间

clientX/Y

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标
客户区指的是当前窗口
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标

pageX 属性是鼠标指针的位置，相对于文档的左边缘
pageY 属性是鼠标指针的位置，相对于文档的上边缘

offsetX,offsetY 鼠标相对于被点击元素(比如div)的x坐标,y坐标

这里写图片描述

拖拽代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>拖拽事件</title>
        <style type="text/css">
            .item{
                width:100px;
                height:100px;
                background-color:red;
                position:absolute;
                left:0px;
                right:0px;
            }
            body{
                height:3000px;
            }
        </style>
    </head>
    <body