help on arrays

help on arrays

can someone please help me getting this done, i need to reorder the buttons to get the sentence "i am a funny sentence" in the right orde, using drag and drop :

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>shuffle2</title>


  </head>
  <body>
    <ul>
i
  <button draggable="true" class="shuffle">a</button>
  <button draggable="true" class="shuffle">am</button>
  <button draggable="true" class="shuffle" >funny</button>
sentence.
</ul>
<p></p>

<script>
$("shuffle2").ready(function(){


function handleDragStart(e) {
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
}


function handleDragOver(e) {
  if (e.preventDefault) {e.preventDefault();}
  e.dataTransfer.dropEffect = 'move'; 
  return false;
}


function handleDrop(e) {
if (e.stopPropagation){e.stopPropagation();}
  if (dragSrcEl != this) {this.parentNode.insertBefore(dragSrcEl, this);}
  return false;
}

var dragSrcEl = null;
var btns = document.querySelectorAll('.shuffle');
var myarray=[];

myarray.forEach.call(btns, function(btn) {
  btn.addEventListener('dragstart', handleDragStart, false);
  btn.addEventListener('dragover', handleDragOver, false);
  btn.addEventListener('drop', handleDrop, false);

});

});
</script>
</body></html>