Shuffle words in a list in Javascript

Question

I've made the following fiddle where the words from one list can be dragged and dropped to the other and vice versa.

The code for drag and drop is fairly straightforward.

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));
}

and each word has draggable="true"

while both divs have ondrop="drop(event)" ondragover="allowDrop(event)"

Now, I need a function to shuffle the words in each list.

Basically, on clicking a button, it should call a function that will shuffle the words present in either list. Honestly, i have NO idea on how to do that. I was thinking of using Javascript's

var input = a.getElementsByTagName('span') where, in my Fiddle, the <span> contains each separate word.

At the same time, I'm wondering if it is similar to this question. If it is, can someone help me on how to use it for my current problem.

Thanks.

Surely [Google hadn't any hits](http://google.com/search?q=shuffle+array+javascript) for "shuffle array javascript"? — , Dec 21 '13 at 21:44
If you read my question, I've clearly tagged a similar question. Please read before commenting. — Newtt, Dec 21 '13 at 21:59

score 2 · Answer 1 · answered Dec 21 '13 at 20:08

Use the awesome underscorejs or lodash. These libraries provide utility functions for javascript, which provide a lot of good functions.

Now to shuffle, do this:

// your array
myWordArray = [...]
$('.shuffle').click(function {
  myWordArray = _.shuffle(myWordArray);
}

score 2 · Accepted Answer · edited May 23 '17 at 10:32

Using the following shuffle function: How can I shuffle an array?

function shuffle(o){ 
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

Example using jQuery:

http://jsfiddle.net/trevordowdle/E4qzS/11/

$('#shuffle').click(function(){
    var spanArray = [];
    $('[id^=div]').each(function(){
        spanArray.length = 0;
        $(this).find('span').each(function(){
            spanArray.push($(this));    
        });
        spanArray = shuffle(spanArray);
        $(this).empty();
        for(var i = 0;i<spanArray.length;i++)
            $(this).append(spanArray[i]);    
     });  
});

imcg · Answer 3 · 2013-12-21T21:12:26.507

If you wanted to use simple JavaScript you could do something like this:

Add a shuffle button to the HTML:

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

Add these functions to the JS:

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'));
});

Updated fiddle: http://jsfiddle.net/imcg/9EDzN/

Shuffle words in a list in Javascript

3 Answers3