jQuery 實現長按圖片縮放並分區歸類儲存：完整互動流程與程式碼

功能需求

• 長按圖片 → 圖片縮小動畫 + 顯示四個分區按鈕。
• 點擊分區按鈕 → AJAX 送分類儲存 → 按鈕隱藏 + 圖片恢復大小。
• 滑鼠放開未點擊分區 → 圖片恢復大小、按鈕隱藏。

HTML 結構

    分區1
    分區2
    分區3
    分區4

jQuery 完整實作

$(function() {
    var $img = $('#targetImg'), $zones = $('#zones'), animating = false;

    $img.on('mousedown', function(e) {
        if (e.which !== 1) return; // 僅左鍵
        animating = true;
        $img.stop().animate({width: '400px', height: '400px'}, 500, function() {
            if (animating) $zones.fadeIn(200);
        });
    });

    $img.on('mouseup mouseleave', function() {
        if (!animating) return;
        animating = false;
        $zones.fadeOut(100);
        $img.stop().animate({width: '500px', height: '500px'}, 300);
    });

    $zones.on('click', 'button', function() {
        var zone = $(this).data('zone');
        animating = false; // 取消恢復動畫
        $zones.hide();
        $.ajax({
            url: '/api/classify',
            method: 'POST',
            data: {imageId: 'current_img_id', zone: zone},
            dataType: 'json'
        }).always(function() {
            $img.animate({width: '500px', height: '500px'}, 300);
        });
    });
});

關鍵細節

• animating 旗標區分「長按中」與「點擊分區後」，避免動畫衝突。
• mouseleave 處理滑出圖片區域取消長按。
• 動畫使用 .stop() 防止佇列堆疊。
• AJAX .always() 確保成功/失敗皆恢復圖片大小。
• 行動裝置需改用 touchstart/touchend 事件。

後端建議

資料表 image_classify (image_id, zone, created_at)，建立複合索引 (image_id, zone) 防重複。