一、HTML

<div id="verify">

    <div id="drag"></div>

    <div id="dot"></div>

    <p id="success">Success!</p>

</div>

二、CSS

body {

    background:#006b9d;

}

#verify{

    width:508px;

    height:523px;

    background:url(bg.png);

    margin:50px auto;

    position:relative;

}

#drag{

    width:171px;

    height:140px;

    background:url(drag.png);

    position:absolute;

    top:185px;

    left:0px;

}

#dot{

    width:29px;

    height:29px;

    background:url(dot.png);

    position:absolute;

    top:460px;

    left:70px;

}

#success{

    position:absolute;

    display:none;

    color:#fff;

    font-size:32px;

    right:0;

    top:130px;

    font-family:sans-serif;

    background:#C33;

    padding:5px 20px;

}

三、JavaScript

//設定最大可拖動的範圍

var max = 350;

//設定拼圖的正確位置座標

var final = 158;

//設定緩衝數值，拼圖移至驗證區的允許範圍

var buffer = 7;

var success = document.getElementById("success");

var dot = document.getElementById("dot");

var drag = document.getElementById("drag");

//獲取圓點的起始x座標

var dotStart = dot.offsetLeft;

//使拼圖隨機向左移動一段距離

drag.style.left = -Math.random()*200+drag.offsetLeft+"px";

//獲取拼圖的起始x座標

var dragStart = drag.offsetLeft;

//當在滑塊上按下滑鼠左鍵時，開始執行以下程式碼

dot.onmousedown = function (e) {

//獲取按下時的滑鼠指標x座標

var startx = e.clientX;

//獲取按下時的滑塊x座標，不一定是起點，有可能使用者多次滑動才驗證成功

var dotLeft = dot.offsetLeft;

//此時，當滑鼠在頁面中移動時，觸發以下函式

document.onmousemove = function (e) {

//計算當前滑鼠指標x座標與初始座標之間的距離，求得滑塊移動的距離

    var move = e.clientX - startx;

//將以上距離加以起始滑塊座標，計算得到目的座標值

     var to = dotLeft + move;

//判斷目的座標值是否超過了滑塊可移動區域的最右側

     if(to > max + dotStart){

//如果超過，則使滑塊停留在最右側

           to = max + dotStart;

//如果目的座標值小於了滑塊的起始座標

      }else if(to < dotStart){

//此時使滑塊停留在可滑動區域的最左側

           to = dotStart;

    }

//重新整理滑塊的x位置

    dot.style.left = to + 'px';

//根據滑塊的位移，重新整理拼圖的x位置，

//to-dotStart不直接用move，因為有可能使用者多次滑動，求得move不唯一

       drag.style.left = (dragStart+to-dotStart) + 'px';

  };

//當鬆開滑鼠左鍵時，開始執行以下程式碼

document.onmouseup = function (e) {

//此時清除onmousemove事件偵聽，防止滑鼠鬆開後滑塊與滑鼠繼續滑動

       this.onmousemove=null;

 //計算拼圖與目的座標值的差值，判斷其絕對值是否小於緩衝值

      if(Math.abs(drag.offsetLeft - final) < buffer){

//如果是，則表示拼圖移動到了正確位置，此時顯示success

        success.style.display = "block";

//拼圖移動到了正確，禁止再次滑動滑塊

        dot.onmousedown=null;

      }else{

//如果否，則繼續隱藏拼圖

        success.style.display = "none";

      }

    }

};