在日常项目中,标签的拖拽移动来进行排序的功能还是比较常用的,因最近项目有一个需求 “拖拽菜单进行排序”,
在网上也查了相关案例吧,基于别人的一个拖拽函数;在其基础上进行应用;
我们先来看看需求,如【微信公众号后台——自定义菜单】里面的菜单排序排序的功能;
好的,需求明了~
开始我的代码编写,编写了一个比较易懂的案例,然后大家可以根据自己的结构进行套用,先看看我的效果:
html结构:
<section class="container">
<h4 class="th">js-jq自由拖拽排序案例</h4>
<div class='sort-com' id="jsSortCom">
<ul class="sort-list">
<li class="item jsDrag">模块A</li>
<li class="item jsDrag">模块B</li>
<li class="item jsDrag">模块C</li>
<li class="item jsDrag">模块D</li>
<li class="item jsDrag">模块E</li>
<li class="item jsDrag">模块F</li>
<li class="item jsDrag">模块G</li>
<li class="item jsDrag">模块H</li>
<li class="item jsDrag">模块I</li>
<li class="item jsDrag">模块J</li>
<li class="item jsDrag">模块K</li>
<li class="item jsDrag">模块L</li>
</ul>
<button class="btn" id="jsSortBtn" data-title1='点击排序' data-title2='完成'>点击排序</button>
</div>
</section>
css样式
<style>
body{ font-family: "Helvetica Neue",Helvetica,"Microsoft YaHei",Arial,sans-serif; background: #f9f9f9; color: #4E546B; margin:0; padding:0; }
ul,ol,li{ list-style:none; margin:0; padding:0; }
.container{ width:740px; margin: 0 auto; text-align: center; }
.container .th{ color: #f00; font-size: 30px; text-align: center; }
.container .sort-com{ width:auto; height:auto; text-align: center;}
.container .sort-com .sort-list{ width:100%; overflow:hidden; -webkit-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none; }
.container .sort-com .sort-list .item{ width: 100px; height: 100px; line-height: 100px; background-color: white; border: 1px solid #ccc; display: inline-block; text-align: center; margin: 10px; color: #333; font-size: 20px; float: left;
cursor: default; }
.container .sort-com .sort-list .item:first-of-type{ background-color:pink;}
.container .sort-com .sort-list .item:nth-of-type(2){ background-color:#f97a90;}
.container .sort-com .sort-list .item:nth-of-type(3){ background-color:#ffdcc0;}
.container .sort-com .sort-list .item:nth-of-type(4){ background-color:#c0ceff;}
.container .sort-com .sort-list .item:nth-of-type(5){ background-color:#68bcff;}
.container .sort-com .sort-list .item:nth-of-type(6){ background-color:#ff5f51;}
.container .sort-com .sort-list .item:nth-of-type(7){ background-color:#fd9a92;}
.container .sort-com .sort-list .item:nth-of-type(8){ background-color:#6bc56f;}
.container .sort-com .sort-list .item:nth-of-type(9){ background-color:#12c9e0;}
.container .sort-com .sort-list .item:nth-of-type(10){ background-color:#fdf290;}
.container .sort-com .sort-list .item:nth-of-type(11){ background-color:#f19fbb;}
.container .sort-com .sort-list .item:nth-of-type(12){ background-color:#dad8d8;}
.container .sort-com.sorting .sort-list .item{ cursor: move;}
.container .btn{ width: 100px; height: 40px; background-color: #525252; color: #fff; cursor: pointer; border:none; outline:none; margin-top: 30px; font-size:16px;}
.container .sort-com.sorting .btn{ background-color:#f73d3d; }
</style>
js方法
<script type="text/javascript" src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
<script type="text/javascript" src="js/drag-arrange.js"></script>
<script type="text/javascript">
//拖拽排序函数
const myDrag = {
//执行拖拽
dragMove(dom) {
$(dom).arrangeable();
//成功后的回调
$(dom).parent().on('drag.end.arrangeable', function(event,$element){
console.log('trigger',$element);
});
},
//摧毁拖拽
dragDestory(dom) {
var jsDragArr = Array.prototype.slice.call($(dom));
for (var i = 0; i < jsDragArr.length; i++) {
var destroy = $(jsDragArr[i]).data('drag-arrange-destroy');
if (destroy) {
destroy();
break;
}
}
},
//点击排序按钮
dragSortClick() {
var bl = true;
$(document).on('click','#jsSortBtn',function () {
var $that = $(this), s = 'show';
var newDrag = Object.create(myDrag);
function fn1(){
$that.text($that.data('title2'));
$('#jsSortCom').addClass('sorting');
newDrag.dragMove('.jsDrag');
}
function fn2(){
$that.text($that.data('title1'));
$('#jsSortCom').removeClass('sorting');
newDrag.dragDestory('.jsDrag');
}
bl ? fn1() : fn2();
bl = !bl;
})
}
}
myDrag.dragSortClick();
</script>
源码会持续更新到公众号,需要可以关注一下哦…