jq自由拖拽的实现（两种）

最新推荐文章于 2022-10-11 12:40:54 发布

原创最新推荐文章于 2022-10-11 12:40:54 发布 · 475 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jq 鼠标拖拽

本文介绍了使用jQuery库实现元素自由拖拽的两种方法，详细讲解了相关代码实现和应用场景，帮助开发者掌握这一交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(".box").on({
            mousedown: function(e){
                var el=$(this);
                var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
                $(document).on('mousemove.drag', function(e){
                    el.offset(
                            {
                                top: e.pageY-dy,
                                left: e.pageX-dx
                            });
                }).on('mouseup',function(e){
                     $(document).off('mousemove.drag');
                     })
            },
        })

$(function () {
            $('#a1').mousedown(function (e) {
                var positionDiv = $(this).offset();
                var distenceX = e.pageX - positionDiv.left;
                var distenceY = e.pageY - positionDiv.top;
                $(document).mousemove(function (e) {
                    var x = e.pageX - distenceX;
                    var y = e.pageY - distenceY;
                    if (x < 0) {
                        x = 0;
                    } else if (x > $(document).width() - $('#a1').outerWidth(true)) {
                        x = $(document).width() - $('#a1').outerWidth(true);
                    }
                    if (y < 0) {
                        y = 0;
                    } else if (y > $(document).height() - $('#a1').outerHeight(true)) {
                        y = $(document).height() - $('#a1').outerHeight(true);
                    }
                    $('#a1').css({
                        'left': x + 'px',
                        'top': y + 'px'
                    });
                });
                $(document).mouseup(function () {
                    $(document).off('mousemove');
                });
            });
        });