js面向对象实现元素拖拽

最新推荐文章于 2024-04-08 09:57:15 发布

游尘牙

最新推荐文章于 2024-04-08 09:57:15 发布

阅读量472

点赞数

分类专栏： javascript 文章标签：面向对象 javascript 拖拽

本文链接：https://blog.csdn.net/dydjtb/article/details/74182251

版权

先对其中的一些将要使用到的event对象及属性进行说明：

event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

offsetLeft、offsetTop
规定元素相对于其有定位的父类距离其左侧与顶部的距离，如果父类没有定位，则相对于body取左侧与顶部距离。

document.documentElement.clientWidth、document.documentElement.clientHeight
获得的是屏幕可视区域的宽高，不包括滚动条与工具条。

offsetWidth、offsetHeight
获取元素的宽度与高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>面向对象继承实现拖拽</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                position: absolute;
                left: 0;
                width: 100px;

最低0.47元/天解锁文章

游尘牙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js面向对象实现元素拖拽

先对其中的一些将要使用到的event对象及属性进行说明：event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。offsetLeft、offsetTop 规定元素相对于其有定位的父类距离其左侧与顶部的距离，如果父类没有定位，则相对于body取左侧与顶部距离。document.
复制链接

扫一扫