小墨の博客

梦想需要付诸行动,否则只能是梦

Jquery拖拽效果

点击代码右上角查看演示。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="content">
            <img src="https://img.only4.work/imgs/2020/06/be858f0a56b2b48e.png">
        </div>
        <style>
        .content {
            position: absolute;
            cursor: pointer;
        }
        </style>
        <script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $(function () {
            var disX = 0;
            var disY = 0;

            $('.content').mousedown(function (ev) {

                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;

                $(document).mousemove(function (ev) {
                    $('.content').css('left', ev.pageX - disX);
                    $('.content').css('top', ev.pageY - disY);
                });

                $(document).mouseup(function () {
                    $(document).off();
                });
                return false;
            });
        });
        </script>
    </body>
</html>

参考:https://yaw.ee/1363.html

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:547
    • 页面总数:20
    • 分类总数:96
    • 标签总数:213
    • 评论总数:63
    • 浏览总数:287025

    | | |
    | |  Z-Blog PHP