ZGxbav

index.html

<header>
  <label for="word-input">请输入正确的单词：</label>
  <input id="word-input" maxlength="18" type="text" />
  <button id="word-btn">生成单词</button>
</header>
<div class="container"></div>

script.js

(function (exports) {
    var
    Word = Object.create({
        input: document.getElementById('word-input'),
        btn: document.getElementById('word-btn'),
        container: document.getElementsByClassName('container')[0],
        words: {},
        init: function (word) {
            if (this.words[word]) return false;
            this.words[word] = this;
            this.wordDom = document.createElement('div');
            this.correct = word;
            this.wordDom.correctWord = word;
            this.generateWord(word);
        },
        generateWord: function (word) {
            var ranWord = randomWord(word),
                i, wordHtml;

            this.wordDom.classList.add('word');
            for (i = 0, length = ranWord.length, wordHtml = []; i < length; i++) {
                wordHtml.push('<div draggable="true" class="letter">' + ranWord[i] + '</div>');
            }
            wordHtml.push('<div class="letter empty">&nbsp;</div>');
            this.wordDom.innerHTML = wordHtml.join('');

            this.container.appendChild(this.wordDom);
        }
    }),
        draggingDom, letters, wordDom,
        forEach = function (obj, func) {
            [].forEach.call(obj, func);
        };

    exports.Word = Word;

    function randomWord(word) {
        var ranWord = word.split('');
        ranWord.sort(function () {
            return 0.5 - Math.random();
        });

        return ranWord.join('');
    }

    (function bindEvent() {
        window.addEventListener('dragstart', handleDragstart, false);
        window.addEventListener('dragenter', handleDragenter, false);
        window.addEventListener('dragover', handleDragover, false);
        window.addEventListener('dragleave', handleDragleave, false);
        window.addEventListener('drop', handleDrop, false);
        window.addEventListener('dragend', handleDragend, false);
        Word.btn.addEventListener('click', generate, false);

        // 绑定事件 -- Begin

        function generate(e) {
            var value = Word.input.value,
                newword;

            if (value.length === 0) {
                alert('请输入正确的单词！');
                return false;
            }
            newword = Object.create(Word);
            newword.init(value);
        }

        function getCurrentWord(dom) {
            var result = [];

            forEach(letters, function (dom) {
                if (dom.classList.contains('empty')) return false;

                result.push(dom.innerHTML);
            });

            return result.join('');
        }

        function handleDragstart(e) {
            var target = e.target,
                targetClass = target.classList;
            if (targetClass.contains('letter') && !targetClass.contains('empty')) {
                draggingDom = e.target;
                wordDom = draggingDom.parentNode,
                letters = wordDom.getElementsByClassName('letter'),
                targetClass.add('moving');
            }
        }

        function handleDragenter(e) {
            var target = e.target,
                targetClass = target.classList;
            if (target.parentNode == wordDom && targetClass.contains('letter') && (target != draggingDom)) {
                targetClass.add('dragging');
            }
        }

        function handleDragover(e) {
            var target = e.target;
            if (target.parentNode == wordDom && e.target.classList.contains('letter')) {
                e.preventDefault();
            }
        }

        function handleDragleave(e) {
            var target = e.target,
                targetClass = target.classList;
            if (targetClass.contains('letter')) {
                targetClass.remove('dragging');
            }
        }

        function handleDrop(e) {
            var target = e.target,
                targetClass = target.classList;
            if (targetClass.contains('letter')) {
                e.stopPropagation();
                target.parentNode.insertBefore(draggingDom, target);
            }
        }

        function handleDragend(e) {
            if (draggingDom) {
                forEach(letters, function (dom) {

                    dom.classList.remove('dragging');
                });
                draggingDom.classList.remove('moving');
                if (getCurrentWord(wordDom) === wordDom.correctWord) {
                    wordDom.classList.add('correct');
                } else {
                    wordDom.classList.remove('correct');
                }
                draggingDom = null;
                wordDom = null;
                letters = null;
            }
        }
        // 绑定事件 -- End
    })();

})(window);

style.css

body {
    margin: 0;
}
header {
    margin-top: 50px;
    text-align: center;
}
.container {
    margin-top: 50px;
    width: 100%;
    height: 100%;
    text-align: center;
}
.word {
    margin-top: 10px;
    font-size: 0;
}
.correct:after {
    content:'正确！';
    position: absolute;
    color: #8cc540;
    font-family: Microsoft YaHei;
    font-size: 24px;
    line-height: 2em;
}
[draggable], .empty {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: element;
}
.letter {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #019fde;
    padding: 5px;
    font-family: Courier New;
    font-size: 36px;
    cursor: move;
    opacity: 1;
    -webkit-transition: -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out;
    transition: transform .2s ease;
}
.empty {
    border-color: transparent;
    cursor: default;
}
.moving {
    opacity: 0.4;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}
.dragging {
    border-style: dotted;
    color: #019fde;
}
.dragging:before {
    content:' ';
    position: absolute;
    left: -11px;
    top: -10px;
    width: 0;
    height: 0;
    border-width: 10px 5px;
    border-style: solid;
    border-color: #019fde transparent transparent transparent;
}

ZGxbav.markdown

ZGxbav

A Pen by MarzK on CodePen.

License.