拖拽

最新推荐文章于 2024-08-22 23:00:01 发布

我是你要找的bug

最新推荐文章于 2024-08-22 23:00:01 发布

阅读量243

点赞数

分类专栏：拖拽文章标签： js

本文链接：https://blog.csdn.net/XUYIGE/article/details/104175111

版权

本文介绍了JavaScript实现拖拽功能的三个基本步骤，并指出在实现过程中可能遇到的问题：一是松开鼠标时，被拖拽元素未能固定；二是鼠标只能在元素左上角触发拖拽。解决方案包括将onmouseup事件绑定到document以及计算元素相对于鼠标的偏移量来提供更佳的用户体验。

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

拖拽的流程：

1、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2、当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box1{
   
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
        #box2{
   
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top:200px;
            left: 200px;