drag-captcha
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo drag verify</title>

    <link rel="stylesheet" type="text/css" href="./dragCaptcha.css">
</head>

<style>
    #show {
        border: 1px solid gray;
        border-radius: 3px;
        width: 60px;
        height: 30px;
        font-size: large;
        margin-top: 300px;
        margin-left: 200px;
    }
</style>
<body>

    <button id="show">show</button>
</body>
<script type="module">
    import {DragCaptcha} from "./dragCaptcha.js";
    //设置要绑定的按钮
    let btn = document.getElementById("show")

    //1.设置 请求数据api 地址， 默认： /dragData
    //DragCaptcha.prototype.apiDataUrl = '/dragData'
    //2.设置 请求验证api 地址， 默认： /dragVerify
    //DragCaptcha.prototype.apiVerifyUrl = '/dragVerify'

    //3.设置语言 默认 zh：中文， en:英文
    //DragCaptcha.prototype.lang = 'en'

    //4.设置debug  默认 true 会打印日志
    //DragCaptcha.prototype.debug = false

    //5.设置验证成功 callback
    DragCaptcha.prototype.cbSuccess = function(drag) {
        console.log("验证通过 cid:", drag.cid)
        //处理自己业务逻辑 提交表单 ...

        //如果业务逻辑失败。需要重新添加点击事件, 因为在验证成功时候会取消点击事件
        //console.log("业务逻辑失败，重新绑定点击事件")
        //drag.addClickEventListener()
    }
    //6. 设置验证失败 callback
    DragCaptcha.prototype.cbFail = function(drag) {
        console.log("验证失败")
    }
    let drag = new DragCaptcha(btn);

</script>
</html>