当前位置：首页 > news >正文

jq实现拖拽功能-解决滚动条引起的偏差

news 来源：原创 2024/5/19 7:30:42

最近在做拖拽功能的时候，在网上找了一些示例代码，示例代码都是大同小异，我发现代码并不完整，仅仅实现了拖拽功能，并未考虑到页面有滚动条时候的拖拽，还未考虑到拖出边界后可能会出现的bug。下面来做个简单分析和解决思路：

不完整示例

$('div').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() - $('div').outerWidth(true)) {
            x = $(document).width() - $('div').outerWidth(true);
        }
        if (y < 0) {
            y = 0;
        } else if (y > $(document).height() - $('div').outerHeight(true)) {
            y = $(document).height() - $('div').outerHeight(true);
        }
        $('div').css({
            'left': x + 'px',
            'top': y + 'px'
        });
    });
    $(document).mouseup(function() {
        $(document).off('mousemove');
    });
});

问题一：

如果使用上面的代码，页面高度够高或者够宽出现滚动条，拖拽的div和鼠标的位置就会有偏差。如果横向出现滚动条且滚动一定距离，那么鼠标就会在拖块的左边；如果是竖向出现滚动条且滚动一定距离，那么鼠标就会在拖块的上边。

解决方案就是在原有的基础之上减去滚动条滚动的距离：

var x = e.pageX - distenceX - $(window).scrollLeft();
var y = e.pageY - distenceY - $(window).scrollTop();

问题二：

在有滚动条的情况下，竖向往下拖拽，横向向右拖拽，拖拽的滑块就会消失，原因是$(document)获取的是页面的高度或宽度

解决方案就是$(document).width()和$(document).height()改成$(window).width()和$(window).height()

问题三：

在某些浏览器可能在鼠标拖出上下边界的时候$(document).off('mousemove')未生效，这个问题可能比较老版本的浏览器会出现。代码中加上return false就对了。

$(document).on('mousemove', function(e) {
	// ...			
	return false;
});

完整示例

这样更改，无论是有滚动条的页面还是无滚动条页面，都可以兼容。

var $el = $('#drag');
$el.on('mousedown', function(e) {
	var positionDiv = $(this).offset();
	var distenceX = e.pageX - positionDiv.left;
	var distenceY = e.pageY - positionDiv.top;
	var scrollLeft = $(window).scrollLeft();
	var scrollTop = $(window).scrollTop();
	$(document).on('mousemove', function(e) {
		var x = e.pageX - distenceX - scrollLeft;
		var y = e.pageY - distenceY - scrollTop;
		if (x < 0) {
			x = 0;
		} else if (x > $(window).width() - $el.outerWidth(true)) {
			x = $(window).width() - $el.outerWidth(true);
		}
		if (y < 0) {
			y = 0;
		} else if (y > $(window).height() - $el.outerHeight(true)) {
			y = $(window).height() - $el.outerHeight(true);
		}
		$el.css({
			'left': x + 'px',
			'top': y + 'px',
			'right': 'auto',
			'bottom': 'auto'
		});
		return false;
	});
	$(document).mouseup(function(e) {
		$(document).off('mousemove');
	})
});

----- 看完啦别忘记点赞哟，您的肯定就是对我最大的支持 END -----