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)
}
});
})
浙公网安备 33010602011771号