sortable 前端拖拽排序，后排处理

火狐 打开新页签解决
document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    }

 

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>

 

$(function () {
        new Sortable(document.getElementById('resource_list'), {
            group: "name",
            animation: 150, //动画参数
            store: null, // @see Store
            /*   handle: ".BtnMove",*/ // 点击目标元素开始排序(只能拖拽当前元素)
            draggable: ".resource_item", // 指定那些选项需要排序
            // ghostClass: "SortableGhost",

            onStart: function( /**Event*/ evt) { // 拖拽
                var itemEl = evt.item;
                console.log('拖拽1',itemEl)
            },
            onEnd: function( /**Event*/ evt) { // 拖拽
                var itemEl = evt.item;
                console.log('拖拽2',itemEl)
            },
            onAdd: function( /**Event*/ evt) {
                var itemEl = evt.item;
                console.log('拖拽3',itemEl)
            },
            onUpdate: function( /**Event*/ evt) {
                var itemEl = evt.item; // 当前拖拽的html元素
                console.log('拖拽5',itemEl)
            },
            onRemove: function( /**Event*/ evt) {
                var itemEl = evt.item;
                console.log('拖拽6',itemEl)
            }
        });
    })