How do I randomly pick up the elements using drag and drop?

I need to drag and drop elements randomly, but my code only works in sequence. I want to put "name1" before "name0", but I can not.

This is the code in javascript:

window.dragStart = function(e) {
 e.dataTransfer.effectAllowed = "move";
 e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
window.dragOver = function(e) {
 e.preventDefault();
 e.stopPropagation();
}
window.drop = function(e) {
 e.stopPropagation();
 e.preventDefault();
 var data = e.dataTransfer.getData("Text");
 e.target.appendChild(document.getElementById(data));


 var txt1 = document.getElementById(data);
 txt1.onclick = function () {
  document.getElementById(data).remove();
  this.remove();};        
 }

window.saveAndDisplay = function() {
 var list = document.getElementById('dropBox').children;
 var result = "Names are: <br />";
 for (var i = 0; i < list.length; i++) {
  result += list[i].id + "<br />";
 }
 document.getElementById('demo').innerHTML = result;
}

This is the code in HTML:

<div class="drop drag"> 

 <ul id="name0" draggable="true" ondragstart="dragStart(event);" ><span class="btn btn-success my-2 my-sm-0">name0</span></ul>
 <ul id="name1" draggable="true" ondragstart="dragStart(event);" ><span class="btn btn-success my-2 my-sm-0">name1</span></ul>

</div>


<div id="dropBox" ondragover="dragOver(event);" 
ondrop="drop(event);"class="drop">

</div>