利用插件（jQuery-ui.js）实现表格行的拖拽排序

Posted 2020-10-25 无花即无果

template 模板（html）

首先要引入jQuery-ui.js的文件、
import ‘./../../scripts/base/jquery/jquery-ui.min.js‘;
<table class="table-common" id="aggVDtTable">
     <thead>
       <tr style="width: 100%;">
          <th class="th1" style="width: 15%;"><label for="aggVDtselectAll"><input type="checkbox" v-model=‘aggVCheckAllDt‘ @click=‘checkedAggVAllDt()‘ name="" id="aggVDtselectAll" value="" />全选</label></th>
          <th class="th2" style="width: 30%;">输出</th>
          <th class="th3" style="width: 40%">需求</th>
          <th class="th4" style="width: 15%;">移动</th>
       </tr>
     </thead>
     <tbody>
        <tr v-for="(items, index) in aggregateValue" :key="aggregateValueDt.uniqueId + index">
            <td ><input type="checkbox" name=""  value="" v-model=‘items.isCheck‘ @change="aggVSingleSelectDt()"/></td>
            <td class="right" contenteditable="true">{{items.ruleName}}</td>
            <td class="right" data-toggle="modal" data-target=".modalShow"
                 @click="aggDtItem = items" style="cursor: pointer">{{items.ruleSpecText}}</td>
            <!--<td style="display: none">{{items.ruleSpec}}</td>-->
            <td class="dragTd" style="cursor: move" @mousemove="dragTr($event,items)"><i class="fa fa-arrows"></i></td>
        </tr>
     </tbody>
</table>

js代码:

//自定义维度指标表格可拖动行排序(jquery-ui)
//拖拽行的宽度设置
            fixHelper(e,ui){          
                 ui.children().each(function() {  
                    $(this).width($(this).width());
                  });
                   return ui;
            },
            dragTr(event,item) {
                var that = this;
                $( "#aggVDtTable tbody").sortable({
                    cursor: "move",
                    helper: that.fixHelper,
                    axis:"y",
                    revert: true, //释放时，增加动画
                    handle:".dragTd" ,
                });
                $( "#aggVDtTable").disableSelection();
                return false;
            },