jq实现鼠标按下并拖动指定块

最新推荐文章于 2024-05-13 15:06:53 发布

老白|

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量3.1k

点赞数

分类专栏：前端 js jq 拖动移动块

本文链接：https://blog.csdn.net/qq_42095753/article/details/90812966

版权

前端同时被 3 个专栏收录

5 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

今天需要实现一个物块拖动，发现很多方法都无法达到预期效果，现在直接上代码，实现指定块的拖动效果，首先看图中白条距离右边的位置，这是未拖动前，在正中间
在这里插入图片描述
这是拖动后，在左上角

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drag demo</title>
    <style>
    </style>
</head>
<body>
<div style="background-color: black;width: 500px;height: 500px">
    <div style="background-color: white;width: 100px;height: 100px" class="slider"></div>
</div>
<script src="https://cdnjs.cloud/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function(){
        $('.slider').mousedown(function(){
            $(document).mousemove(function(e){
                $('.slider').offset({
                    left:e.pageX,
                    top:e.pageY
                })
            })
            $('.slider').mouseup(function(){
                $(document).off('mousemove')
            })
        })

    })

</script>
</body>
</html>

OK，直接放编辑器里预览就能看到效果

老白|

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq实现鼠标按下并拖动指定块

今天需要实现一个物块拖动，发现很多方法都无法达到预期效果，现在直接上代码，实现指定块的拖动效果，首先看图中白条距离右边的位置，这是未拖动前，在正中间这是拖动后，在左上角上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫

专栏目录