Shuffle nodes (stackoverflow)

http://stackoverflow.com/questions/20723056/shuffle-words-in-a-list-in-javascript/20723237#20723237

by imcg

HTML

List one
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="f1" draggable="true" ondragstart="drag(event)"> I </span>
 <span id="f2" draggable="true" ondragstart="drag(event)"> play </span>
 <span id="f3" draggable="true" ondragstart="drag(event)"> the </span>
 <span id="f4" draggable="true" ondragstart="drag(event)"> guitar</span>
 <span id="f5" draggable="true" ondragstart="drag(event)"> for</span>
 <span id="f6" draggable="true" ondragstart="drag(event)"> Anthracite.</span>
 <span id="f7" draggable="true" ondragstart="drag(event)"> Mumbai</span>
 <span id="f8" draggable="true" ondragstart="drag(event)"> based</span>
 <span id="f9" draggable="true" ondragstart="drag(event)"> nu-metal</span>
 <span id="f10" draggable="true" ondragstart="drag(event)"> band</span>
</div>
<br>List two
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="s1" draggable="true" ondragstart="drag(event)"> I</span>
 <span id="s2" draggable="true" ondragstart="drag(event)"> also</span>
 <span id="s3" draggable="true" ondragstart="drag(event)"> freelance</span>
 <span id="s4" draggable="true" ondragstart="drag(event)"> as</span>
 <span id="s5" draggable="true" ondragstart="drag(event)"> a</span>
 <span id="s6" draggable="true" ondragstart="drag(event)"> web</span>
 <span id="s7" draggable="true" ondragstart="drag(event)"> designer</span>
 <span id="s8" draggable="true" ondragstart="drag(event)"> and</span>
 <span id="s9" draggable="true" ondragstart="drag(event)"> developer</span>
 <span id="s10" draggable="true" ondragstart="drag(event)"> ABC</span>

</div>
    <button id='btn-shuffle'>SHUFFLE</button>

CSS

#div1, #div2 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

function shuffleNodes(parent) {
    var nodes = parent.childNodes;
    var arr = [];
    for(var i = 0; i < nodes.length; i++) {
        arr.push(nodes[i]);
    }
    arr.sort(function() {
        return Math.random() < 0.5 ? -1 : 1;
    });
    parent.innerHTML = '';
    for(var j = 0; j < arr.length; j++) {
        parent.appendChild(arr[j]);
    }
}

document.getElementById('btn-shuffle').addEventListener('click', function() {
    shuffleNodes(document.getElementById('div1'));
    shuffleNodes(document.getElementById('div2'));
});