Sortable plugin is not working i don't know what mistake i have made can some one please help me?

Sortable plugin is not working i don't know what mistake i have made can some one please help me?

<!DOCTYPE html>

<html>

<head>

   <script type="text/javascript">  
    $(function() {  
         $(".rightItems").sortable();
      }); 
   </script> 
   <style type="text/css">
   
   .leftItems{
   text-align:center;
   border:1px solid red;
   background-color:red;
   color:white;
   padding:5px;
   cursor:pointer;
   }

   .rightItems{
   text-align:center;
   border:1px solid green;
   background-color:green;
   color:white;
   padding:5px;
   }

   .finalItems{
   text-align:center;
   border:1px solid orange;
   background-color:orange;
   color:white;
   padding:5px;
   }

  .buttonStyle{
   border:1px solid orange;
   border-radius:5px;
   color:white;
   background-color:orange;
   font-size:16px;
  }

  .outerBorder{
  border:2px solid blue;
  padding:5px;
  }

 </style>
</head>

<body>

<table>

<thead>

<tr>

<th nowrap style="color:red;">Available Sections</th>

<th></th>

<th nowrap style="color:green;">Selected Sections</th>

<th></th>

<th nowrap><button class="buttonStyle">Generate Form</button></th>
<th nowrap><button class="buttonStyle">Generate 360 Form</button></th>

</tr>

</thead>

<tbody>

<tr>



<td width="20%" class="outerBorder">

<table width="100%">

<tr>

<td nowrap class="leftItems">aaaaaa1</td>

</tr>

<tr>

<td nowrap class="leftItems">aaaaaa2</td>

</tr>

</table>

</td>



<td width="5%">

<table>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

</td>



<td width="20%" class="outerBorder">

<table width="100%">

<tr>

<td nowrap class="rightItems">bbbbbb1</td>

</tr>

<tr>

<td nowrap class="rightItems">bbbbbb2</td>

</tr>

</table>

</td>



<td width="5%">

<table>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

</td>



<td colspan="2" width="50%" class="outerBorder">

<table width="100%">

<tr>

<td nowrap class="finalItems">bbbbbb1</td>

</tr>

<tr>

<td nowrap class="finalItems">bbbbbb2</td>

</tr>

</table>

</td>



</tr>

</tbody>

</table>

</body>

</html>