鼠标拖拽和边界吸附

最新推荐文章于 2023-10-16 15:32:58 发布

qq_42736234

最新推荐文章于 2023-10-16 15:32:58 发布

阅读量1.3k

点赞数 4

分类专栏： js基础案例文章标签： javascript css3 html

本文链接：https://blog.csdn.net/qq_42736234/article/details/103816888

版权

本文介绍如何使用JavaScript、CSS3和HTML实现鼠标拖拽元素并使其在接近边界时自动吸附的效果。首先，通过原生JavaScript获取元素并绑定鼠标事件，允许元素在鼠标按下、移动和抬起时响应。接着，通过边界值判定，在元素即将超出屏幕边界时调整其位置，使其固定在边界上。最后，展示了包含布局、CSS样式和完整JS代码的实现过程。

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

思路：
1、拖拽

获取元素

绑定事件：当鼠标按下时，可以拖走；鼠标移动时，拖着走；鼠标抬起时，不能拖走

2、边界值判定

当鼠标将要超过边界值时，强行让元素位置固定在边界上

效果：
在这里插入图片描述
一、布局

<div id="drag"></div>

二、css样式

* {
   
            margin: 0;
            padding: 0;
        }
        
        #drag {
   
            background-color: lightgreen;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: fixed;
        }

三、原生js

拖拽

			 //获取元素
        var drag = document.getElementById('drag')
            //设置一个开关
        var flag = false
        drag.addEventListener('mousedown', function() {
   
            //鼠标点下时开关打开
            flag = true
        })
        document.onmousemove = function(e) {
   
            //开关闭合时不执行函数
            if (flag == false) return
                //事件对象获取（兼容模式）
            e &