js实现元素拖动效果

最新推荐文章于 2025-06-24 13:38:39 发布

程序员小黑

最新推荐文章于 2025-06-24 13:38:39 发布

阅读量1.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 元素拖动

本文链接：https://blog.youkuaiyun.com/qq_36237569/article/details/88899636

首先看一下演示效果，项目在线演示
实现思路：将元素拖动分为三部分，鼠标按下，鼠标移动，鼠标弹起，分别监听三个事件。首先是定义四个变量startX，startY，sourceX，sourceY，分别代表鼠标点击的横纵坐标和物体的横纵坐标（左上角坐标），接着定义鼠标点击的监听事件，当鼠标点击时，记录鼠标点击的坐标还有物体的坐标，然后给文档加上鼠标移动和鼠标弹起事件

this.elem.addEventListener('mousedown', start, false);
function start(event){
   
   
    self.startX = event.pageX; //记录鼠标点击的坐标
    self.startY = event.pageY;
    
    var pos = self.getPosition(); //获取物体的坐标对象
    self.sourceX = pos.x; //记录物体的坐标
    self.sourceY = pos.y;                    

    document.addEventListener('mousemove', move