拖放排序列表JS插件---SortableJS使用教程

github下载地址：https://github.com/SortableJS/Sortable

个人百度网盘下载地址：

链接：https://pan.baidu.com/s/1Y4Od-Ysgs2xliTUjb16S-A
提取码：emvt

业务逻辑：

从右边全部课程区域拖拽一个副本到左边区域，右边数据源区域不能产生排序，左边内容接收区分好几个tab，每个tab内的课程ID唯一且换不影响，每个tab内的拖拽组件可排序、删除、分页。

页面引入JS：

<script src="/manager_assets/sortable/Sortable.js"></script>

页面代码：

【全部课程区域】

<div id="items"></div>

     //全部课程var sortable = Sortable.create(document.getElementById('items'), {group: {name: 'advanced',pull: 'clone',//pull用来定义从这个列表容器移动出去的设置，可设置值：true/false/'clone'/functionput: false   //put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function 这里用false表示列表容器不可以从其他列表容器内放入列表单元；},sort: false,//设置排序不可用onEnd: function(evt, obj) {//列表单元拖放结束后的回调函数$(evt.item).css("border", ""); //删除表示重复的样式},});

【左边内容接收区域】

（用的是layUI）

<div class="course-container" style="background: #fff; width: 55%; height: 95%; left: 0px; border: 1px solid #000000;"><div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"><ul class="layui-tab-title"><li class="layui-this">会员最新上架</li><li>即将上架</li><li>推荐课程</li><li>热门课程</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div id="vpiNewTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="vpiNewTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div><div class="layui-tab-item"><div id="comingTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="comingTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div><div class="layui-tab-item"><div id="recommendTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="recommendTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div>                            </div><div class="layui-tab-item"><div id="hotTab" style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="hotTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div></div></div></div>

     //会员最新上架sortablevar vipSortable = Sortable.create(document.getElementById('vpiNewTab'), {group: {name: 'advanced',pull: true,put: function(evt, from, item) {//当有新组件拖过来该容器，调用该函数//去重return norepeat(evt, item,3);},},onAdd: function(evt) { //拖拽完成调用该函数//添加组件到会员最新上架TabaddItem(evt.newIndex, evt.item, evt.to, 3);},onUpdate: function(evt) {// 列表单元在列表容器中的排序发生变化后的回调函数//容器内只有一个组件的时候拖拉不会触发该函数//拖拽更新排序位置sortCourses(evt,3);},});

参考资料：

https://segmentfault.com/a/1190000008209715?utm_source=tag-newest

https://www.jb51.net/article/96446.htm

该页面全部代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>课程排序</title>
</head>
<style>body {-webkit-text-size-adjust: none}.course-container {position: absolute !important;margin: 20px;top: 0px;}.all-course-style {/* border-bottom:1px solid #000000; */font-weight: bold;font-size: 125%;padding: 20px 20px 10px 20px;}.hr-style {/*内嵌水平线*/width: 100%;margin: 1 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}.allc-style {margin-left: 5px;margin-right: 5px;}div.imgcard {width: 130px;height: 145px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;display: inline-block;position: relative;}.Pagging {left: calc(50% - 162px)}.card-word {font-size: 80%;text-align: left;margin: 3px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;min-height: 35px;}.course-price-status {color: #F5C63B;}.course-bottom {color: #909399;font-size: 12px;transform: scale(0.833333);}.card-img {width: 130px;height: 70px;}
</style><body>
<div id="advanced"><!-- 左边容器 --><div class="course-container"style="background: #fff; width: 55%; height: 95%; left: 0px; border: 1px solid #000000;"><div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"><ul class="layui-tab-title"><li class="layui-this">会员最新上架</li><li>即将上架</li><li>推荐课程</li><li>热门课程</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div id="vpiNewTab"style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="vpiNewTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div><div class="layui-tab-item"><div id="comingTab"style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="comingTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div><div class="layui-tab-item"><div id="recommendTab"style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="recommendTabPagging" class="Pagging"style="position: absolute; bottom: 0;bottom:0px;"></div></div><div class="layui-tab-item"><div id="hotTab"style="width: 860px; height: 610px; position: absolute; overflow-y: auto; padding: 10px;"></div><div id="hotTabPagging" class="Pagging" style="position: absolute; bottom: 0;bottom:0px;"></div></div></div></div></div><!-- 右边容器 --><div class="course-container"style="background: #fff; width: 41%; height: 95%; right: 0px; border: 1px solid #000000;"><div class="all-course-style">全部课程<hr class="hr-style"></div><div class="allc-style"><div class="layui-inline" style="width: 100%"><label class="layui-form-label">课程名称：</label><div class="layui-input-inline"><input id="coursename" lay-verify="required|phone" autocomplete="off" class="layui-input"style="height: 30px;"></div><button class="layui-btn layui-btn-sm" style="margin-left: 30px;" onclick="allCourses(1)">搜索</button></div><div id="items"></div><div id="allCoursePagging" class="Pagging" style="position: absolute; bottom:0px;"></div></div></div>
</div>
</body>
<script src="***/js/jquery.min.js"></script>
<script src="***/sortable/Sortable.js"></script>
<script src="***/layui/layui.js"></script>
<link rel="stylesheet" href="***/layui/css/layui.css">
<script src="***/layui/lay/modules/layer.js"></script>
<link rel="stylesheet" href="***/layui/css/modules/layer/default/layer.css">
<script>var vipNewCIds = new Array();var comingCIds = new Array();var recommendCIds = new Array();var hotCIds = new Array();var loadComing = 0;var loadRecommend = 0;var loadHot = 0;var origin = window.location.origin;var paging = {currentPage: 1,pageSize: 12,total: 0}var pagingl = {currentPage: 1,pageSize: 15,total: 0}var pagingComing = {currentPage: 1,pageSize: 15,total: 0}var pagingRecommend = {currentPage: 1,pageSize: 15,total: 0}var pagingHot = {currentPage: 1,pageSize: 15,total: 0}var comingpage = null;var recommendpage = null;var hotpage = null;layui.use('element', function () {var element = layui.element;//一些事件监听element.on('tab(docDemoTabBrief)', function (data) {//console.log(this); //当前Tab标题所在的原始DOM元素//console.log(data.index); //得到当前Tab的所在下标//console.log(data.elem); //得到当前的Tab大容器if (data.index == 1) {//即将上架if (loadComing == 0) {//已loadloadComing = 1;//list数据listTabCourses(4, $("#comingTab"));//初始化即将上架的分页layui.use('laypage', function () {comingpage = layui.laypage;//执行一个laypage实例comingpage.render({elem: 'comingTabPagging', //注意，这里的 test1 是 ID，不用加 # 号count: pagingComing.total, //数据总数，从服务端得到limit: pagingComing.pageSize,groups: 3,jump: function (obj, first) {//obj包含了当前分页的所有参数，比如：//console.log("obj.count",obj.count);//console.log("obj.curr",obj.curr);//得到当前页，以便向服务端请求对应页的数据。//console.log("obj.limit",obj.limit);//得到每页显示的条数if (obj.curr != pagingComing.currentPage) {pagingComing.currentPage = obj.curr;//首次不执行if (!first) {listTabCourses(4, $("#comingTab"));}}}});});}} else if (data.index == 2) {if (loadRecommend == 0) {//已loadloadRecommend = 1;//list数据listTabCourses(2, $("#recommendTab"));//初始化即将上架的分页layui.use('laypage', function () {recommendpage = layui.laypage;//执行一个laypage实例recommendpage.render({elem: 'recommendTabPagging', //注意，这里的 test1 是 ID，不用加 # 号count: pagingRecommend.total, //数据总数，从服务端得到limit: pagingRecommend.pageSize,groups: 3,jump: function (obj, first) {if (obj.curr != pagingRecommend.currentPage) {pagingRecommend.currentPage = obj.curr;//首次不执行if (!first) {listTabCourses(2, $("#recommendTab"));}}}});});}} else if (data.index == 3) {if (loadHot == 0) {//已loadloadHot = 1;//list数据listTabCourses(1, $("#hotTab"));//初始化即将上架的分页layui.use('laypage', function () {hotpage = layui.laypage;//执行一个laypage实例hotpage.render({elem: 'hotTabPagging', //注意，这里的 test1 是 ID，不用加 # 号count: pagingHot.total, //数据总数，从服务端得到limit: pagingHot.pageSize,groups: 3,jump: function (obj, first) {if (obj.curr != pagingHot.currentPage) {pagingHot.currentPage = obj.curr;//首次不执行if (!first) {listTabCourses(1, $("#hotTab"));}}}});});}}});});$(function () {//初始化页面数据allCourses();listTabCourses(3, $("#vpiNewTab"));})function listTabCourses(cSortType, target) {var pagedata = "";if (cSortType == 1) {pagedata = JSON.stringify(pagingHot);} else if (cSortType == 2) {pagedata = JSON.stringify(pagingRecommend);} else if (cSortType == 3) {pagedata = JSON.stringify(pagingl);} else if (cSortType == 4) {pagedata = JSON.stringify(pagingComing);}$.ajax({url: origin + "***",type: 'post',dataType: 'json',async: false,data: {"paging": pagedata,"cSortType": cSortType},success: function (data) {createCard(data.res, $(target), 1, cSortType);if (cSortType == 4) {pagingComing.total = data.tempObj.total;if (data.tempObj.ids) {comingCIds = data.tempObj.ids.split(",");}} else if (cSortType == 3) {//会员最新上架pagingl.total = data.tempObj.total;if (data.tempObj.ids) {vipNewCIds = data.tempObj.ids.split(",");}} else if (cSortType == 2) {//会员最新上架pagingRecommend.total = data.tempObj.total;if (data.tempObj.ids) {recommendCIds = data.tempObj.ids.split(",");}} else if (cSortType == 1) {//会员最新上架pagingHot.total = data.tempObj.total;if (data.tempObj.ids) {hotCIds = data.tempObj.ids.split(",");}}}});}//初始化会员最新上架的分页var viplaypage = null;layui.use('laypage', function () {viplaypage = layui.laypage;//执行一个laypage实例viplaypage.render({elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingl.total //数据总数，从服务端得到,limit: pagingl.pageSize,groups: 3,jump: function (obj, first) {//首次不执行if (!first) {pagingl.currentPage = obj.curr;listTabCourses(3, $("#vpiNewTab"));}}});});function allCourses(searchClick) {if (searchClick == 1) {paging.currentPage = 1; //点击搜索之后分页重置为第一页}$.ajax({url: origin + "***",type: 'post',async: false,dataType: 'json',data: {"paging": JSON.stringify(paging),"title": $("#coursename").val()},success: function (data) {//渲染页面createCard(data.res, $("#items", 0));paging.total = data.tempObj;if (searchClick == 1) {//初始化分页layui.use('laypage', function () {var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'allCoursePagging' //注意，这里的 test1 是 ID，不用加 # 号,count: paging.total //数据总数，从服务端得到,limit: paging.pageSize,groups: 3,jump: function (obj, first) {//首次不执行if (!first) {paging.currentPage = obj.curr;allCourses();}}});});}},error: function (res) {console.log("获取初始数据失败！！");}});}function addToCourseSort(ids, type, sortType) {$.ajax({url: origin + "***",type: 'post',dataType: 'json',data: {'ids': ids,'course_type': type,'sortType': sortType},success: function (data) {if (type == 1) {if (data.tempObj) {hotCIds = data.tempObj.split(",");}if (data.status == 0) {pagingHot.total += 1;}//拖到过来后，分页中的total也要+1hotpage.render({elem: 'hotTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingHot.total //数据总数，从服务端得到,limit: pagingHot.pageSize,groups: 3,curr: pagingHot.currentPage,jump: function (obj, first) {if (obj.curr != pagingHot.currentPage) {pagingHot.currentPage = obj.curr;listTabCourses(1, $("#vpiNewTab"));}}});} else if (type == 2) {if (data.tempObj) {recommendCIds = data.tempObj.split(",");}if (data.status == 0) {pagingRecommend.total += 1;}//拖到过来后，分页中的total也要+1recommendpage.render({elem: 'recommendTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingRecommend.total //数据总数，从服务端得到,limit: pagingRecommend.pageSize,groups: 3,curr: pagingRecommend.currentPage,jump: function (obj, first) {if (obj.curr != pagingRecommend.currentPage) {pagingRecommend.currentPage = obj.curr;listTabCourses(2, $("#recommendTab"));}}});} else if (type == 3) {if (data.tempObj) {vipNewCIds = data.tempObj.split(",");}if (data.status == 0) {pagingl.total += 1;}//拖到过来后，分页中的total也要+1viplaypage.render({elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingl.total //数据总数，从服务端得到,limit: pagingl.pageSize,groups: 3,curr: pagingl.currentPage,jump: function (obj, first) {if (obj.curr != pagingl.currentPage) {pagingl.currentPage = obj.curr;listTabCourses(3, $("#vpiNewTab"));}}});} else if (type == 4) {if (data.tempObj) {comingCIds = data.tempObj.split(",");}if (data.status == 0) {pagingComing.total += 1;}//拖到过来后，分页中的total也要+1viplaypage.render({elem: 'comingTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingComing.total //数据总数，从服务端得到,limit: pagingComing.pageSize,groups: 3,curr: pagingComing.currentPage,jump: function (obj, first) {if (obj.curr != pagingComing.currentPage) {pagingComing.currentPage = obj.curr;listTabCourses(4, $("#comingTab"));}}});}}})}//初始化分页layui.use('laypage', function () {var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'allCoursePagging' //注意，这里的 test1 是 ID，不用加 # 号,count: paging.total //数据总数，从服务端得到,limit: paging.pageSize,groups: 3,jump: function (obj, first) {//首次不执行if (!first) {paging.currentPage = obj.curr;allCourses();}}});});//全部课程var sortable = Sortable.create(document.getElementById('items'), {group: {name: 'advanced',pull: 'clone',//pull用来定义从这个列表容器移动出去的设置，可设置值：true/false/'clone'/functionput: false  //put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function 这里用false表示列表容器不可以从其他列表容器内放入列表单元；},sort: false,//设置排序不可用onEnd: function (evt, obj) {//列表单元拖放结束后的回调函数$(evt.item).css("border", ""); //删除表示重复的样式},});var hotSortable = Sortable.create(document.getElementById('hotTab'), {group: {name: 'advanced',pull: true,put: function (evt, from, item) {//去重return norepeat(evt, item, 1);},},onAdd: function (evt) { //拖拽完成addItem(evt.newIndex, evt.item, evt.to, 1);//然后请求后台ajax 这样就完成了拖拽排序},onUpdate: function (evt) {sortCourses(evt, 1);},});var recommendSortable = Sortable.create(document.getElementById('recommendTab'), {group: {name: 'advanced',pull: true,put: function (evt, from, item) {//去重return norepeat(evt, item, 2);},},onAdd: function (evt) { //拖拽完成addItem(evt.newIndex, evt.item, evt.to, 2);//然后请求后台ajax 这样就完成了拖拽排序},onUpdate: function (evt) {sortCourses(evt, 2);},});var comingSortable = Sortable.create(document.getElementById('comingTab'), {group: {name: 'advanced',pull: true,put: function (evt, from, item) {//去重return norepeat(evt, item, 4);},},onAdd: function (evt) { //拖拽完成addItem(evt.newIndex, evt.item, evt.to, 4);//然后请求后台ajax 这样就完成了拖拽排序},onUpdate: function (evt) {sortCourses(evt, 4);},});//会员最新上架sortablevar vipSortable = Sortable.create(document.getElementById('vpiNewTab'), {group: {name: 'advanced',pull: true,put: function (evt, from, item) {//当有新组件拖过来该容器，调用该函数//去重return norepeat(evt, item, 3);},},onAdd: function (evt) { //拖拽完成调用该函数//添加组件到会员最新上架TabaddItem(evt.newIndex, evt.item, evt.to, 3);},onUpdate: function (evt) {// 列表单元在列表容器中的排序发生变化后的回调函数//容器内只有一个组件的时候拖拉不会触发该函数//拖拽更新排序位置sortCourses(evt, 3);},});function sortCourses(evt, cSortType) {//新的排序根据前面那个card的id来定位，没有前面的card的时候就根据后面的id来定位var sorttype = -1;var ids = "";if (evt.newIndex > 0) { //不是第一个，就根据前面的ID来定位ids = $($(evt.to).children()[evt.newIndex - 1]).attr("id") + "," + $(evt.item).attr("id");sorttype = 0;} else { //是第一个，就根据后面那个ID定位ids = $(evt.item).attr("id") + "," + $($(evt.to).children()[evt.newIndex + 1]).attr("id");sorttype = 1;}$.ajax({url: origin + "/***",dataType: 'json',data: {'sortType': sorttype,'cSortType': cSortType,'ids': ids},success: function (data) {for (var i = 0, len = $(evt.to).children().length; i < len; i++) {$($(evt.to).children()[i].firstChild).text(i + 1);}}});}function norepeat(evt, item, type) {if (type == 3) {for (var i = 0, len = vipNewCIds.length; i < len; i++) {if ($(item).attr("id") == vipNewCIds[i]) {$(item).css("border", "1px solid red");//layer.msg('该课程已经存在，请勿重复添加');return false;}}} else if (type == 4) {for (var i = 0, len = comingCIds.length; i < len; i++) {if ($(item).attr("id") == comingCIds[i]) {$(item).css("border", "1px solid red");//layer.msg('该课程已经存在，请勿重复添加');return false;}}} else if (type == 2) {for (var i = 0, len = recommendCIds.length; i < len; i++) {if ($(item).attr("id") == recommendCIds[i]) {$(item).css("border", "1px solid red");//layer.msg('该课程已经存在，请勿重复添加');return false;}}} else if (type == 1) {for (var i = 0, len = hotCIds.length; i < len; i++) {if ($(item).attr("id") == hotCIds[i]) {$(item).css("border", "1px solid red");//layer.msg('该课程已经存在，请勿重复添加');return false;}}}return true;}function addItem(index, item, to, type) {var head = $('<span class="layui-badge layui-bg-orange sort" style="position:absolute;left:0;">' +(index + 1) +'</span><i class="layui-icon" onclick="delCard(&apos;' +$(item).attr("id") +'&apos;,' + type +')" style="position:absolute;right:0;color:#fff;background-color:#D9001B;cursor:pointer;"></i>')$(item).prepend(head); ////动态排序for (var i = 0, len = $(to).children().length; i < len; i++) {$($(to).children()[i].firstChild).text(i + 1);}//拼装ids，传两个id，第一个id用于定位，第二个才是要插入的id//前面有ID就用前面的，没有就用后面的IDvar ids = '';var sortType = -1;if (index == 0) {if ($(to).children()[index + 1]) {sortType = 1;ids = $(item).attr("id") + "," + $($(to).children()[index + 1]).attr("id");} else {ids = $(item).attr("id");}} else {sortType = 0;ids = $($(to).children()[index - 1]).attr("id") + "," + $(item).attr("id");}//请求后台ajax 完成拖拽排序addToCourseSort(ids, type, sortType);}function delCard(id, type) {layer.confirm('从该列表中删除该课程？', {icon: 3,title: '提示'},function (index) {$.ajax({url: origin + "***",dataType: 'json',data: {"course_type": type,"course_id": id},success: function (data) {if (type == 1) {hotCIds = data.tempObj;$("#hotTab #" + id).remove();for (var i = 0, len = $("#hotTab").children().length; i < len; i++) {$($("#hotTab").children()[i].firstChild).text(i + 1);}if (data.status == 0) {pagingHot.total -= 1;}hotpage.render({elem: 'hotTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingHot.total //数据总数，从服务端得到,limit: pagingHot.pageSize,groups: 3,curr: pagingHot.currentPage,jump: function (obj, first) {if (obj.curr != pagingHot.currentPage) {pagingHot.currentPage = obj.curr;listTabCourses(1, $("#recommendTab"));}}});} else if (type == 2) {recommendCIds = data.tempObj;$("#recommendTab #" + id).remove();for (var i = 0, len = $("#recommendTab").children().length; i < len; i++) {$($("#recommendTab").children()[i].firstChild).text(i + 1);}if (data.status == 0) {pagingRecommend.total -= 1;}recommendpage.render({elem: 'recommendTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingRecommend.total //数据总数，从服务端得到,limit: pagingRecommend.pageSize,groups: 3,curr: pagingRecommend.currentPage,jump: function (obj, first) {if (obj.curr != pagingRecommend.currentPage) {pagingRecommend.currentPage = obj.curr;listTabCourses(2, $("#recommendTab"));}}});} else if (type == 3) {vipNewCIds = data.tempObj;$("#vpiNewTab #" + id).remove();for (var i = 0, len = $("#vpiNewTab").children().length; i < len; i++) {$($("#vpiNewTab").children()[i].firstChild).text(i + 1);}if (data.status == 0) {pagingl.total -= 1;}viplaypage.render({elem: 'vpiNewTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingl.total //数据总数，从服务端得到,limit: pagingl.pageSize,groups: 3,curr: pagingl.currentPage,jump: function (obj, first) {if (obj.curr != pagingl.currentPage) {pagingl.currentPage = obj.curr;listTabCourses(3, $("#vpiNewTab"));}}});} else if (type == 4) {comingCIds = data.tempObj;$("#comingTab #" + id).remove();for (var i = 0, len = $("#comingTab").children().length; i < len; i++) {$($("#comingTab").children()[i].firstChild).text(i + 1);}if (data.status == 0) {pagingComing.total -= 1;}comingpage.render({elem: 'comingTabPagging' //注意，这里的 test1 是 ID，不用加 # 号,count: pagingComing.total //数据总数，从服务端得到,limit: pagingComing.pageSize,groups: 3,curr: pagingComing.currentPage,jump: function (obj, first) {if (obj.curr != pagingComing.currentPage) {pagingComing.currentPage = obj.curr;listTabCourses(4, $("#comingTab"));}}});}layer.close(index);}});});}//渲染页面//left: 1-渲染左边的tab，0-渲染右边 //type:排序板块：1-热门课程 2-最新课程 3-会员免费课程 4-即将上架课程function createCard(data, oContainer, left, type) {var html = "";for (var i = 0; i < data.length; i++) {html += '<div id="' + data[i].id +'" name="courseName" class="imgcard" style="margin-left: 30px; margin-top: 30px;">'if (left == 1) {html += '<span class="layui-badge layui-bg-orange sort" style="position:absolute;left:0;">' +(i + 1) +'</span><i class="layui-icon" onclick="delCard(&apos;' + data[i].id + '&apos;,' + type +')" style="position:absolute;right:0;color:#fff;background-color:#D9001B;cursor:pointer;"></i>';}html += '<img src="' + data[i].cover_m + '" class="card-img" />' +'<div><p class="card-word">' + data[i].title + '</p></div>';//状态判断if (0 == data[i].status) {html += '<div style="width:50px;height:16px;background-color:#D9001B;color:#fff;font-size: 12px;">待上架</div>';} else if (1 == data[i].status) {html += '<div style="width:50px;height:16px;background-color:#70B603;color:#fff;font-size: 12px;">上架</div>';} else if (2 == data[i].status) {html += '<div style="width:50px;height:16px;background-color:#AAAAAA;color:#fff;font-size: 12px;">已下架</div>';} else if (3 == data[i].status) {html += '<div style="width:50px;height:16px;background-color:#AAAAAA;color:#fff;font-size: 12px;">暂停销售</div>';} else if (5 == data[i].status) {html += '<div style="width:50px;height:16px;background-color:#F59A23;color:#fff;font-size: 12px;">即将上架</div>';}html +='<div style="text-align: left; padding-left: 3px; padding-right: 3px; position: absolute; bottom: 0; width: 100%;">';if (!data[i].vip_price) {html += '<span class="course-price-status">' + data[i].price + '</span> ';} else if (data[i].vip_price == 0) {html += '<span class="course-price-status">免费</span> ';} else {html += '<span class="course-price-status">' + data[i].vip_price + '</span> ';}html += '<span class="course-bottom" style="text-decoration: line-through;">￥' + data[i].show_price + '</span>';html += '<span class="course-bottom" style="right: 13px; position: absolute; bottom: 0;">' + data[i].study_num +'人在学</span></div></div>';}oContainer.html(html);}
</script>
</html>

拖放排序列表JS插件---SortableJS使用教程相关推荐

Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
Sortable.js拖放排序JavaScript库
本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...
element表格拖放排序
使用Sortable.js是一款轻量级的拖放排序列表的js插件 npm install sortablejs --save //在组件中导入 import Sortable from 'sortabl ...
java sortable_拖放排序插件Sortable.js
介绍特点支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序移动列表单元时有css动画支持拖放操作和可选择的文 ...
html5支持drag的拖放排序插件sortable.js
html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/S ...
html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...
layui实现下拉多选列表（xm-select.js插件使用，后台添加或修改数据回显提交问题总结）
话不多说上干活实现效果展示: 首先新增 xm-select.js插件 //后台传输用来查询是否新增还是修改 model.addAttribute("updatAppNameList&quo ...
HTML5 进阶系列：拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...
imagesLoaded-检测图片是否正确加载的js插件
简要教程 imagesLoaded是一款用于检测页面中的图片是否被加载的js插件.imagesLoaded是非常有用的插件,当你的页面中某幅图片没有被加载时,默认会显示一个红叉或图片alt文本,ima ...

拖放排序列表JS插件---SortableJS使用教程

拖放排序列表JS插件---SortableJS使用教程相关推荐

最新文章

热门文章