酷炫的jquery拼图相册

// 获取图片的宽度和高度
var imgWidth = $('#image').width();
var imgHeight = $('#image').height();

// 定义小块的宽度和高度
var blockWidth = 100;
var blockHeight = 100;

// 计算需要切割的小块数量
var cols = Math.ceil(imgWidth / blockWidth);
var rows = Math.ceil(imgHeight / blockHeight);

// 切割图片并生成小块
for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        var block = $('<div class="block"></div>');
        block.css({
            width: blockWidth,
            height: blockHeight,
            left: j * blockWidth,
            top: i * blockHeight
        });
        $('#puzzle-container').append(block);
    }
}

$('.block').on('mousedown', function(event) {
    // 记录当前拖动的小块
    var currentBlock = $(this);
    var offsetX = event.offsetX;
    var offsetY = event.offsetY;

    $(document).on('mousemove', function(event) {
        // 计算拖动后的位置
        var newX = event.pageX - offsetX;
        var newY = event.pageY - offsetY;

        // 更新小块的位置
        currentBlock.css({
            left: newX,
            top: newY
        });
    });

    $(document).on('mouseup', function() {
        // 移除事件监听器
        $(document).off('mousemove');
        $(document).off('mouseup');

        // 处理拖动交换逻辑
        // ...
    });
});