js自由拖拽来排序的功能案例

在日常项目中，标签的拖拽移动来进行排序的功能还是比较常用的，因最近项目有一个需求 “拖拽菜单进行排序”，
在网上也查了相关案例吧，基于别人的一个拖拽函数；在其基础上进行应用；

我们先来看看需求，如【微信公众号后台——自定义菜单】里面的菜单排序排序的功能；

好的，需求明了~
开始我的代码编写，编写了一个比较易懂的案例，然后大家可以根据自己的结构进行套用，先看看我的效果：

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>

源码会持续更新到公众号，需要可以关注一下哦…