jquery窗口拖动

实现 jQuery 窗口拖动的方法如下：

1. 首先我们需要给窗口标记一个可拖拽的区域，比如标题栏。

2. 在鼠标按下事件中获取当前鼠标的位置和窗口的位置，计算出鼠标在窗口内的偏移量。

3. 在鼠标移动事件中，计算出窗口应该移动的位置，并进行移动。

4. 在鼠标松开事件中，取消鼠标移动事件的监听。

以下是示例代码：

HTML 代码：

<div class="window">
    <div class="title-bar">窗口标题</div>
    <div class="content">
        窗口内容
    </div>
</div>

CSS 代码：

.window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.title-bar {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    cursor: move;
    background-color: #f0f0f0;
}

jQuery 代码：

$(function() {
    var isDragging = false;
    var mouseX = 0, mouseY = 0;
    var windowX = 0, windowY = 0;
    var offsetX = 0, offsetY = 0;

    $('.title-bar').mousedown(function(e) {
        isDragging = true;
        mouseX = e.pageX;
        mouseY = e.pageY;
        windowX = $('.window').offset().left;
        windowY = $('.window').offset().top;
        offsetX = mouseX - windowX;
        offsetY = mouseY - windowY;
    });

    $(document).mousemove(function(e) {
        if (isDragging) {
            var x = e.pageX - offsetX;
            var y = e.pageY - offsetY;
            $('.window').offset({ top: y, left: x });
        }
    });

    $(document).mouseup(function(e) {
        isDragging = false;
    });
});

以上代码实现了窗口的拖动功能，当鼠标按下标题栏时，窗口会跟随鼠标移动，当鼠标松开时，窗口停止移动。