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>