拖拽拼图

function drag() {
    var cgNumber = 0, // 成功数量
        srcs = document.querySelectorAll('.src'),
        dests = document.querySelectorAll('.dest'),
        success = document.querySelector('#success'),
        // 目标位置信息
        destPos = [...dests].map(el => ({
            id: el.id,
            pos: el.getBoundingClientRect()
        })),
        // 拼图模块添加拖拽
        removeFunArr = [...srcs].map(src => ({
            id: src.id,
            pos: src.getBoundingClientRect(),
            remove: _drag(src)
        }));
    // 拖拽
    function _drag(el) {
        var isDrag = false, // 是否可拖拽
            startX = 0, // 鼠标距离盒子的距离
            startY = 0;
        function down(e) {
            isDrag = true
            startY = e.pageY - this.offsetTop
            startX = e.pageX - this.offsetLeft
        }
        function move(e) {
            if (!isDrag) return;
            // 当前位置 - 鼠标局里盒子位置
            moveDom(this, e.pageY - startY, e.pageX - startX)
        }
        function closehandler(e) {
            isDrag = false
            handler(this)
        }
        el.addEventListener('mousedown', down)
        el.addEventListener('mouseup', closehandler)
        el.addEventListener('mouseleave', closehandler)
        el.addEventListener('mousemove', move)
        function removeEvent() {
            el.removeEventListener('mousedown', down)
            el.removeEventListener('mouseup', closehandler)
            el.removeEventListener('mouseleave', closehandler)
            el.removeEventListener('mousemove', move)
        }
        return removeEvent
    }
    function moveDom(el, top, left) {
        el.style.top = top + 'px'
        el.style.left = left + 'px'
    }
    // 判断位置及后续处理
    function handler(el) {
        var id = el.id.replace('src', 'dest')
        // 对应目标位置
        var targetPos = destPos.find(pos => pos.id == id)
        // 判断是否到目标区域 2/3以上重合
        if (targetPos) {
            // 区域设置 目标位置 4周全部加 1/3 距离 在该区域内即可
            var tarPos = targetPos.pos
            var offsetY = tarPos.height / 3
            var offsetX = tarPos.width / 3
            var pos = {
                width: tarPos.width + offsetX * 2,
                height: tarPos.height + offsetY * 2,
                top: tarPos.top - offsetY,
                left: tarPos.left - offsetX
            }
            if (
                el.offsetLeft >= pos.left &&
                el.offsetLeft <= pos.left + pos.width &&
                el.offsetTop >= pos.top &&
                el.offsetTop <= pos.top + pos.height
            ) {
                console.log('拼图成功')
                sucessHandle(el, { // 拼图成功处理
                    left: tarPos.left + 1,
                    top: tarPos.top + 1
                })
            }else{
                console.log('拼图失败')
                rejecthander(el)
            }
        }
    }
    function rejecthander(el){
        var obj = removeFunArr.find(obj => obj.id == el.id)
        obj && moveDom(el, obj.pos.top, obj.pos.left)
    }
    function sucessHandle(el, {
        top,
        left
    }) {
        // 移动到目标位置
        moveDom(el, top, left)
        // 取消移动
        var obj = removeFunArr.find(obj => obj.id == el.id)
        obj && obj.remove();
        cgNumber++
        if (cgNumber == srcs.length) { // 全部完成
            success.style.display = 'block'
        }
    }
}

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function drag() {

    var cgNumber = 0,
        // 成功数量
    srcs = document.querySelectorAll('.src'),
        dests = document.querySelectorAll('.dest'),
        success = document.querySelector('#success'),

    // 目标位置信息
    destPos = [].concat(_toConsumableArray(dests)).map(function (el) {
        return {
            id: el.id,
            pos: el.getBoundingClientRect()
        };
    }),

    // 拼图模块添加拖拽
    removeFunArr = [].concat(_toConsumableArray(srcs)).map(function (src) {
        return {
            id: src.id,
            pos: src.getBoundingClientRect(),
            remove: _drag(src)
        };
    });

    // 拖拽
    function _drag(el) {
        var isDrag = false,
            // 是否可拖拽
        startX = 0,
            // 鼠标距离盒子的距离
        startY = 0;

        function down(e) {
            isDrag = true;
            startY = e.pageY - this.offsetTop;
            startX = e.pageX - this.offsetLeft;
        }

        function move(e) {
            if (!isDrag) return;
            // 当前位置 - 鼠标局里盒子位置
            moveDom(this, e.pageY - startY, e.pageX - startX);
        }

        function closehandler(e) {
            isDrag = false;
            handler(this);
        }
        el.addEventListener('mousedown', down);
        el.addEventListener('mouseup', closehandler);
        el.addEventListener('mouseleave', closehandler);
        el.addEventListener('mousemove', move);

        function removeEvent() {
            el.removeEventListener('mousedown', down);
            el.removeEventListener('mouseup', closehandler);
            el.removeEventListener('mouseleave', closehandler);
            el.removeEventListener('mousemove', move);
        }
        return removeEvent;
    }

    function moveDom(el, top, left) {
        el.style.top = top + 'px';
        el.style.left = left + 'px';
    }
    // 判断位置及后续处理
    function handler(el) {
        var id = el.id.replace('src', 'dest');
        // 对应目标位置
        var targetPos = destPos.find(function (pos) {
            return pos.id == id;
        });
        // 判断是否到目标区域 2/3以上重合
        if (targetPos) {
            // 区域设置 目标位置 4周全部加 1/3 距离 在该区域内即可
            var tarPos = targetPos.pos;
            var offsetY = tarPos.height / 3;
            var offsetX = tarPos.width / 3;
            var pos = {
                width: tarPos.width + offsetX * 2,
                height: tarPos.height + offsetY * 2,
                top: tarPos.top - offsetY,
                left: tarPos.left - offsetX
            };
            if (el.offsetLeft >= pos.left && el.offsetLeft <= pos.left + pos.width && el.offsetTop >= pos.top && el.offsetTop <= pos.top + pos.height) {
                console.log('拼图成功');
                sucessHandle(el, { // 拼图成功处理
                    left: tarPos.left + 1,
                    top: tarPos.top + 1
                });
            } else {
                console.log('拼图失败');
                rejecthander(el);
            }
        }
    }

    function rejecthander(el) {
        var obj = removeFunArr.find(function (obj) {
            return obj.id == el.id;
        });
        obj && moveDom(el, obj.pos.top, obj.pos.left);
    }
    function sucessHandle(el, _ref) {
        var top = _ref.top;
        var left = _ref.left;

        // 移动到目标位置
        moveDom(el, top, left);
        // 取消移动
        var obj = removeFunArr.find(function (obj) {
            return obj.id == el.id;
        });
        obj && obj.remove();
        cgNumber++;
        if (cgNumber == srcs.length) {
            // 全部完成
            success.style.display = 'block';
        }
    }
}