前端 JavaScript -- 实现元素的拖拽功能

最新推荐文章于 2024-05-11 14:12:39 发布

小刘爱搬砖

最新推荐文章于 2024-05-11 14:12:39 发布

阅读量2.3k

点赞数 2

分类专栏：前端文章标签： js html

本文链接：https://blog.csdn.net/chang100111/article/details/113802112

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素当鼠标松开，元素固定到鼠标松开的位置。

<style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            position: absolute;
        }
    </style> 
<script>
        window.onload = function () {
          var box1 =  document.getElementById("box1");
          drag(box1);
        };


        /**
         * 专门用来拖拽的方法，参数为拖拽元素的ID
         */
       function drag(obj) {
            //当鼠标在被拖拽元素上按下，开始拖拽
            obj.onmousedown = function (event) {
                //设置obj捕获所有的鼠标按下事件，而不仅仅是在元素内部区域
                // obj.setCapture && obj.setCapture();
                //解决兼容性问题,实现IE8的兼容
                event = event || window.event;
                //鼠标在元素中的偏移量等于 鼠标的clientX - 元素的offsetLeft
                var ol = event.clientX - obj.offsetLeft;
                var ot = event.clientY - obj.offsetTop;


                //为document绑定一个onmousemove事件
                document.onmousemove = function (event) {
                    event = event || window.event;
                    //当鼠标移动时，被拖拽元素跟随鼠标移动
                    //获取鼠标的坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;

                    //修改元素的位置 修改元素的位置只能通过 元素.style.属性 = "属性值";
                    obj.style.left = left + "px";
                    obj.style.top = top + "px";
                };
                //为document绑定一个鼠标松开事件onmouseup
                document.onmouseup = function () {
                    //当鼠标松开时，被拖拽元素固定在当前位置
                    //当鼠标松开时，取消onmousemove事件
                    document.onmousemove = null;
                    //当鼠标松开时，onmouseup事件，要不每次一松开鼠标都触发此事件
                    document.onmouseup = null;
                    //鼠标松开，取消事件的捕获
                    //obj.releaseCapture && obj.releaseCapture();
                };
                /**
                 * 当我们拖拽一个网页中的内容时，浏览器默认会使用搜索引擎去搜索拖拽的文本内容
                 * 可以通过return false取消这种行为
                 *
                 * 注：IE8 使用return false无效
                 */
                return false;
            };
       }
    </script>

<body>
<div id="box1"></div>

</body>

注：一定要将元素的css样式的position进行设置，否则无效果一般设置为position: absolute;

正在学习中，如果不足之处，感谢各位指正

小刘爱搬砖

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
前端 JavaScript -- 实现元素的拖拽功能

实现元素的拖拽功能，类似于桌面的图标，鼠标点击长按可以移动元素当鼠标松开，元素固定到鼠标松开的位置。<style> #box1{ width: 100px; height: 100px; background-color: rebeccapurple; position: absolute; } </style> <script>
复制链接

扫一扫