如何排序Draggables 2头

Question

我的代码：

<script>
  $( function() {
    $( "#sortable" ).sortable({
      revert: true
    });

    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });

    $( "ul, li" ).disableSelection();
  } );
</script>

<?php 
  $heads = array("test", "test2");
  $num = count($heads);
  $data = array("1", "2", "3","4","5");
  $num2 = count($data);
?>


<ul>
  <?php 
    for($i=0;$i<$num;$i++){ 
  ?>
  <li id="draggable" class="ui-state-highlight"><?php echo $heads[$i] ?>
  </li>

    <?php } ?>
</ul>

<ul id="sortable">


<?php
for($i=0;$i<$num2;$i++){ 
?>
  <li class="ui-state-default"><?php echo $data[$i] ?></li>
    <?php } ?>

 </ul>

如何使其可用。

我开始学习JS。我仍然无法理解JS，但我需要使用这个Draggable。

我想有两个Draggable头并且可以使用两者，但现在它不可用。我想将数组数据检索到Draggable头。