圖片滑動驗證碼，邏輯是根據滑鼠滑動軌跡，座標位置，計算拖動速度等等來判斷是否人為操作，當然下面的程式碼只是實現前端部分，只記錄了拖動的座標。

先上程式碼吧，做個備份記錄

jquery.lgymove.js

/**
 * Created by lgy on 2017/10/21.
 * 圖片驗證碼
 */
(function ($) {
    $.fn.imgcode = function (options) {
        //初始化引數
        var defaults = {
            callback:""  //回撥函式
        };
        var opts = $.extend(defaults, options);
        return this.each(function () {
            var $this = $(this);//獲取當前物件
            var html = '<div class="code-k-div">' +
                '<div class="code_bg"></div>' +
                '<div class="code-con">' +
                '<div class="code-img">' +
                '<div class="code-img-con">' +
                '<div class="code-mask"><img src="../img/front(1).png"></div>' +
                '<img src="../img/back(1).png"></div>' +
                '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">重新整理</i><span class="code-tip"></span></div>' +
                '</div>' +
                '<div class="code-btn">' +
                '<div class="code-btn-img code-btn-m"></div>' +
                '<span>按住滑塊，拖動完成上方拼圖</span>' +
                '</div></div></div>';
            $this.html(html);

            //定義拖動引數
            var $divMove = $(this).find(".code-btn-img"); //拖動按鈕
            var $divWrap = $(this).find(".code-btn");//滑鼠可拖拽區域
            var mX = 0, mY = 0;//定義滑鼠X軸Y軸
            var dX = 0, dY = 0;//定義滑動區域左、上位置
            var isDown = false;//mousedown標記
            if(document.attachEvent) {//ie的事件監聽，拖拽div時禁止選中內容，firefox與chrome已在css中設定過-moz-user-select: none; -webkit-user-select: none;
                $divMove[0].attachEvent('onselectstart', function() {
                    return false;
                });
            }
            //按鈕拖動事件
            $divMove.on({
                mousedown: function (e) {
                    //清除提示資訊
                    $this.find(".code-tip").html("");
                    var event = e || window.event;
                    mX = event.pageX;
                    dX = $divWrap.offset().left;
                    dY = $divWrap.offset().top;
                    isDown = true;//滑鼠拖拽啟
                    $(this).addClass("active");
                    //修改按鈕陰影
                    $divMove.css({"box-shadow":"0 0 8px #666"});
                }
            });
            //滑鼠點選鬆手事件
            $(document).mouseup(function (e) {
                var lastX = $this.find(".code-mask").offset().left - dX - 1;
                isDown = false;//滑鼠拖拽啟
                $divMove.removeClass("active");
                //還原按鈕陰影
                $divMove.css({"box-shadow":"0 0 3px #ccc"});
                checkcode(lastX);
            });
            //滑動事件
            $divWrap.mousemove(function (event) {
                var event = event || window.event;
                var x = event.pageX;//滑鼠滑動時的X軸
                if (isDown) {
                    if(x>(dX+30) && x<dX+$(this).width()-20){
                        $divMove.css({"left": (x - dX - 20) + "px"});//div動態位置賦值
                        $this.find(".code-mask").css({"left": (x - dX-30) + "px"});
                    }
                }
            });
            //驗證資料
            function checkcode(code){
                var iscur=false;
                //模擬ajax
                setTimeout(function(){
                    if(iscur){
                        checkcoderesult(1,"驗證通過");
                        $this.find(".code-k-div").hide();
                        opts.callback({code:1000,msg:"驗證通過",msgcode:"23dfdf123"});
                    }else{
                        $divMove.addClass("error");
                        checkcoderesult(0,"驗證不通過");
                        opts.callback({code:1001,msg:"驗證不通過"});
                        setTimeout(function() {
                            $divMove.removeClass("error");
                            $this.find(".code-mask").animate({"left":"0px"},200);
                            $divMove.animate({"left": "10px"},200);
                        },400);
                    }
                },500)
            }
            //驗證結果
            function checkcoderesult(i,txt){
                if(i==0){
                    $this.find(".code-tip").addClass("code-tip-red");
                }else{
                    $this.find(".code-tip").addClass("code-tip-green");
                }
                $this.find(".code-tip").html(txt);
            }
        })
    }
})(jQuery);
 

css部分：

.code_bg{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,.5);
    z-index: 99;
}
.icon-login-bg{
    background-image: url(../img/icon/loginicon.png);
    background-repeat: no-repeat;
}
.code-con{
    position: absolute;
    top:100px;
    width: 320px;
    left: 50%;
    margin-left: -160px;
    background-color: #fff;
    z-index: 100;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.code-img{
    margin: 5px 5px;
    padding: 5px 5px;
    background-color: #f5f6f7;
}
.code-img img{
    display: block;
}
.icon-w-25{
    display: inline-block;
    width: 25px;
    height: 25px;
    text-indent: -9999px;
}
.icon-push{
    cursor: pointer;
    background-position: -149px -95px;
}
.code-push{
    height: 25px;
}
.code-btn{
    position: relative;
    height: 30px;
    text-align: center;
    color: #999;
    margin: 10px 10px;
    box-sizing: border-box;
    background-color: #f5f6f7;
    border-radius: 15px;
    border: 1px solid #e1e1e1;
}
.code-btn-m{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f6f7;
    border: 1px solid #e1e1e1;
    z-index: 5;
    top:-8px;
    left: 10px;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
    background-position: -63px 10px;
}
.code-btn-img{
    background-image:url(../img/icon/codejt.png);
    background-repeat: no-repeat;
}
.code-btn-img.active{
    background-position: -134px 10px;
}
.code-btn-img.error{
    background-position: 8px 10px;
}
.code-img-con{
    position: relative;
}
.code-mask{
    position: absolute;
    top:0;
    left: 0;
    z-index: 10;
}
.code-tip{
    padding-left: 10px;
    font-size: 12px;
    color: #999;
}
.code-tip-red{
    color: red;
}
.code-tip-green{
    color: green;
}
 

html部分：

<div id="imgscode"></div>
<script>
$("#imgscode").imgcode();
</script>

例項展示: http://www.xiuler.com        （可輸入32位字元測試，例：OtgsFq6d4mv7sEox4b2wBTdRtIBCSug8）
 

效果圖：