jQuery 拖动层(在可视区域范围内)

jQuery 拖动层是一种常见的 Web 开发技术，它允许 Web 页面上的元素随着用户的鼠标拖动而移动。如果你想要实现拖动层的功能，并且希望元素只能在可视区域范围内进行拖动，那么可以按照以下步骤进行操作。

设置样式

首先需要在 CSS 文件中设置元素的样式。例如，可以设置一个 div 元素，宽度和高度都为 100 像素，并设置背景色和边框。

.draggable {
    width: 100px;
    height: 100px;
    background-color: #EEE;
    border: 1px solid #CCC;
}

开发 jQuery 代码

接下来需要编写 jQuery 代码来实现拖动层的功能。可以使用 mousedown 和 mousemove 事件来捕获鼠标的位置信息，并将元素相对于文档的偏移量保存在变量中。在 mousemove 事件中更新元素的位置，并且添加一个判断，使得元素只能在可视区域范围内移动。

$(function() {
    var draggable = $(".draggable");
    var drag = false;
    var x, y, currentX, currentY;

    draggable.mousedown(function(e) {
        e.preventDefault();
        drag = true;
        x = e.pageX;
        y = e.pageY;
        currentX = draggable.offset().left;
        currentY = draggable.offset().top;
    });

    draggable.mousemove(function(e) {
        if (drag) {
            var moveX = e.pageX - x;
            var moveY = e.pageY - y;
            var maxX = $(document).width() - draggable.outerWidth();
            var maxY = $(window).height() - draggable.outerHeight() + $(window).scrollTop();

            if (currentX + moveX >= 0 && currentX + moveX <= maxX) {
                draggable.css("left", currentX + moveX + "px");
            }

            if (currentY + moveY >= $(window).scrollTop() && currentY + moveY <= maxY) {
                draggable.css("top", currentY + moveY + "px");
            }
        }
    });

    draggable.mouseup(function(e) {
        drag = false;
    });
});

示例说明

下面给出两个示例代码，分别演示如何实现拖动层功能。

示例一

在这个示例中，我们将页面上的一个 div 元素变成可拖动的，并且只能在页面可视区域范围内进行移动。这个示例的 HTML 代码如下所示：

<div class="draggable"></div>

对应的 jQuery 代码如下所示：

$(function() {
    var draggable = $(".draggable");
    var drag = false;
    var x, y, currentX, currentY;

    draggable.mousedown(function(e) {
        e.preventDefault();
        drag = true;
        x = e.pageX;
        y = e.pageY;
        currentX = draggable.offset().left;
        currentY = draggable.offset().top;
    });

    draggable.mousemove(function(e) {
        if (drag) {
            var moveX = e.pageX - x;
            var moveY = e.pageY - y;
            var maxX = $(document).width() - draggable.outerWidth();
            var maxY = $(window).height() - draggable.outerHeight() + $(window).scrollTop();

            if (currentX + moveX >= 0 && currentX + moveX <= maxX) {
                draggable.css("left", currentX + moveX + "px");
            }

            if (currentY + moveY >= $(window).scrollTop() && currentY + moveY <= maxY) {
                draggable.css("top", currentY + moveY + "px");
            }
        }
    });

    draggable.mouseup(function(e) {
        drag = false;
    });
});

示例二

在这个示例中，我们将页面上多个 div 元素变成可拖动的，并且只能在页面可视区域范围内进行移动。这个示例的 HTML 代码如下所示：

<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>

对应的 jQuery 代码如下所示：

$(function() {
    var draggable = $(".draggable");
    var drag = false;
    var x, y, currentX, currentY;

    draggable.mousedown(function(e) {
        e.preventDefault();
        drag = true;
        x = e.pageX;
        y = e.pageY;
        currentX = $(this).offset().left;
        currentY = $(this).offset().top;
    });

    draggable.mousemove(function(e) {
        if (drag) {
            var moveX = e.pageX - x;
            var moveY = e.pageY - y;
            var maxX = $(document).width() - $(this).outerWidth();
            var maxY = $(window).height() - $(this).outerHeight() + $(window).scrollTop();

            if (currentX + moveX >= 0 && currentX + moveX <= maxX) {
                $(this).css("left", currentX + moveX + "px");
            }

            if (currentY + moveY >= $(window).scrollTop() && currentY + moveY <= maxY) {
                $(this).css("top", currentY + moveY + "px");
            }
        }
    });

    draggable.mouseup(function(e) {
        drag = false;
    });
});