select2 with sort using drag and drop

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(".chooser").select2({
      tags: true,
      width: 250
    });
    $("ul.select2-selection__rendered").sortable({
      containment: 'parent'
    });
  });
</script>
</head>
<body>
  <select class="chooser form-control" multiple="multiple">
    <option>yellow</option>
    <option>blue</option>
    <option>purple</option>
    <option>red</option>
  </select>
</body>