Create an array based on the order of dropped elements

Create an array based on the order of dropped elements

I've been trying to resolve this for several hours and have failed miserably.

I understand the basic concept of creating an array based on say, getting the id's from a set of div's, using

  1. var myArray = $('#menu > div').map(function() {
  2.     return this.id
  3. });

  5. $('button').click(function() {
  6.     console.log(myArray.get().join(', '));
  7. });


jsfiddle

but I can't for the life of me figure out how to create an array from some ui.draggables. In the sample I would need to return an array that matched the order of the text in each red div once dropped, so if the user drops in the order 3, 1, 2, I need myArray to appear as ['3', '1', '2'], likewise if the user drops them in the order 1, 2, 3, myArray would need to appear as ['1', '2', '3'] and so on (irrespective of which divs were dropped when).

I played around with .each and .map trying things such as this but nothing I've tried comes close. I can happily get the values dropped using:

  1. var numberDropped = ui.draggable.text();

but I can not figure out how to pass the values, in the the order they appear to an array!

  1. var myArray = $('#container > div').map(function() {
  2.    return numberDropped
  3. });

  5. $('button').click(function() {
  6.     console.log(myArray.get().join(', '));
  7. });