Drag Validation - 拖動驗證-解鎖

drag-validation.js

$(function() {
    var drag = $this("drag");
    var dvi = $this("drag-validation-img");
    var dvl = $this("drag-validation-lock");
    var dvc = $this("drag-validation-canvas");
    var dvctx = dvc.getContext("2d");
    var dp = $this("drag-progress");
    var dpb = $this("drag-progress-bar");
    // 缺少的圖像數據
    var dragImgData;
    // 動態數據
    var offset = 0;
    // 解開鎖 : true ,未開鎖 : false
    var unlock = false;
    var dragMarginLeft;
    var dmlAndDPPOl;
    //
    calculateDragLeftVal();

    /*
     * 獲取標籤的margin-left 值
     * document.defaultView.getComputedStyle(drag,null)['marginLeft']
     */

    function mobileRectangular(e) {
        if (unlock) {
            // 清除移動事件綁定
            eventBindings();
        } else {
            offset = e.clientX - dmlAndDPPOl;
            console.log("偏移量:" + offset);
            if (offset <= 20) {
                offset = dragMarginLeft / 2;
            } else if (offset >= 190) {
                offset = dragMarginLeft * 4 - 10;
            } else {
                offset = e.clientX - dmlAndDPPOl;
            }
            console.log("offset:" + offset + " dml:" + dmlAndDPPOl);
            drag.style.marginLeft = offset + "px";
            dpb.style.width = offset - 30 + "%";
            redraw(offset);
        }

    }

    function redraw(x) {
        dvctx.clearRect(0, 0, 263, 170);
        // 繪製原始圖像
        dvctx.drawImage(dvi, 0, 0, 263, 170);
        // 截取一個矩形圖片 並使其產生缺口 來填補其數據
        dragImgData = dvctx.getImageData(130, 20, 60, 60);
        // 當鼠標懸浮的時候 顯示出canvas缺口形狀
        dvctx.clearRect(130, 20, 60, 60);
        // 生成要拖動的圖像
        dvctx.putImageData(dragImgData, x, 20, 0, 0, 263, 170);
    }
    /*
     * 計算並獲取drag left 間距值
     */
    function calculateDragLeftVal() {
        dragMarginLeft = document.defaultView.getComputedStyle(drag, null)['marginLeft']
                .replace("px", "");
        dmlAndDPPOl = (dragMarginLeft / 2)
                + dp.parentNode.parentNode.offsetLeft + 10;
    }

    // 窗口改變事件 觸發 則重新獲取一次left值
    window.onresize = function() {
        calculateDragLeftVal();
    };

    // 添加拖動圖片按下不鬆開 移動事件
    drag.addEventListener("mousedown", function(e) {
        drag.addEventListener("mousemove", mobileRectangular, false);
    }, false);

    // 添加拖動圖片按下鬆開 事件
    drag.addEventListener("mouseup", function(e) {
        // 清除移動事件綁定
        eventBindings();
        if (130 <= offset) {
            console.log("good!");
            dvl.src = "custom/imgs/plugin/drag-validation/unlock.png";
            dvi.style.display = "none";
            dvc.style.display = "none";
            unlock = true;
        } else if (20 >= offset) {

        }
    }, false);

    function eventBindings() {
        // 清除移動事件綁定
        if (drag.removeEventListener) {
            drag.removeEventListener("mousemove", mobileRectangular, false);
        } else if (drag.detachEvent) {
            drag.detachEvent("onmousemove", mobileRectangular, false);
        }
    }

    // 添加土洞圖片懸浮事件
    drag.addEventListener("mouseover", function(e) {
        if (unlock) {
            // 清除移動事件綁定
            eventBindings();
        } else {
            dvi.style.display = "none";
            dvc.style.display = "block";
            // 繪製原始圖像
            dvctx.drawImage(dvi, 0, 0, 263, 170);
            // 截取一個矩形圖片 並使其產生缺口 來填補其數據
            dragImgData = dvctx.getImageData(130, 20, 60, 60);
            // 生成要拖動的圖像
            dvctx.putImageData(dragImgData, 50, 20, 0, 0, 263, 170);
            // 當鼠標懸浮的時候 顯示出canvas缺口形狀
            dvctx.clearRect(130, 20, 60, 60);
        }
    }, false);

    // 添加拖動圖片懸浮溢出事件
    drag.addEventListener("mouseout", function(e) {
        dvi.style.display = "none";
        dvc.style.display = "none";
    }, false);
    // 獲取標籤
    function $this(obj) {
        return document.getElementById(obj);
    }
});

drag-validation.jsp

<div class="row">
        <div class="col-sm-3">
            <div style="margin-left: -15px;">
                <img
                    src="custom/imgs/plugin/drag-validation/drag-validation-img1.jpg"
                    id="drag-validation-img" width="263" height="170"
                    style="display: none; position: absolute; margin-top: -170px; margin-left: 15px;" />
                <canvas id="drag-validation-canvas" width="263" height="170"
                    style="display: none; position: absolute; margin-top: -170px; margin-left: 15px;">
            </canvas>
            </div>
            <div id="drag-progress" class="progress">
                <div id="drag-progress-bar"
                    class="progress-bar progress-bar-striped active" role="progressbar"
                    aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
                    style="width: 30%;">
                    <span class="sr-only">45% Complete</span>
                </div>
                <div id="drag"></div>
            </div>
        </div>
        <div class="col-sm-3">
            <img id="drag-validation-lock"
                src="custom/imgs/plugin/drag-validation/lock.png" width="30px"
                height="30px" style="margin-top: -10px; margin-left: -10px" />
        </div>
    </div>