You can use the Jquery CDN :
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>You can use the Select2 CDN :
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>You can use the SortableSelect2 CDN :
<link href="https://cdn.jsdelivr.net/gh/Niyko/SortableSelect2/src/sortable.select2.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/Niyko/SortableSelect2/src/sortable.select2.js"></script>Finally, we need to initialize SortableSelect2 as shown below. You don't need to additionally initialize Select2. SortableSelect2 will take care of that.
$("select[multiple]").sortableSelect2();<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/Niyko/SortableSelect2/src/sortable.select2.css" rel="stylesheet"/>
</head>
<body>
<select class="food" name="food" multiple style="width: 400px">
<option selected value="milk">Milk</option>
<option selected value="apple">Apple</option>
<option selected value="orange">Orange</option>
<option value="biscuit">Biscuit</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Niyko/SortableSelect2/src/sortable.select2.js"></script>
<script type="text/javascript">
$(function (){
$(".food").sortableSelect2();
});
</script>
</body>
</html>View and edit this example on Codepen.
SortableSelect2 is licensed under the MIT LICENSE (MIT).