sortable.js 中文網http://www.sortablejs.com/index.html

下載：https://pan.baidu.com/s/1EFfwctub3LrVayWZ_HwqMg

<span id="courseLabelNames" style="cursor:pointer;"></span>

$("#courseLabelNames").append(
     "<span style=\"padding:10px;margin-left:12px;\" data-id=" + courseInfoId + ">" + courseTitle + "</span>");

courseInfoId  sort  表字段 sort 排序，courseInfoId  id主鍵

<script type="text/javascript" src="<%=basePath%>/js/Sortable/Sortable.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/Sortable/st/app.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/Sortable/jquery.binding.js"></script>
<script type="text/javascript">
    Sortable.create(document.getElementById(
 
'courseLabelNames'), {
        group: "localStorage-example",
        sort: true,
        animation: 150,
        store: {
            get: function (sortable) {
                var order = localStorage.getItem(sortable.options.group.name);
　　　　　　　　　　console.log("排序前欄位排序"+order)
                return
 
 order ? order.split("|") : [];
            },
            set: function (sortable) {
                var order = sortable.toArray();
                localStorage.setItem(sortable.options.group.name, order.join("|"));
　　　　　　　　　　console.log("排序後的欄位排序"+order)
                $("#checkedCourseIds").val(order)
            }
        },
    });
</script>