本文共 5051 字，大约阅读时间需要 16 分钟。

之前用的是通过css控制位置，然后支持拖动，

//添加排序对讲窗口      SortVideoTable(sortIntercomBoxDatas) {           this.intercomBoxDatas.push(sortIntercomBoxDatas);        /*初始化jquery*/        /* $(document).ready(() => {           /!*lua中的一个函数,math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.*!/           for (var i = 1; i <= this.intercomBoxDatas.length; i++) {             if (window.screen.width == 1366) {               var css = {                 left: (Math.ceil((i) % 5.1) - 1) * 18 + 4 + '%',                 top: (Math.ceil((i + 1) / 6.1) - 1) * 150 + 10,               };             } else if (window.screen.width == 1920 && window.screen.height == 1280) {               var css = {                 left: (Math.ceil((i) % 6.1) - 1) * 1 + 1 + '%',                 // left: (Math.ceil((i) % 6.1) -1) * 1 + 1 + 'px',                 top: (Math.ceil((i + 1) / 7.1) - 1) * 20 + 20,               };             } else {               /!*var css = {                 left: (Math.ceil((i) % 5.1) - 1) * 16.5 + 4 + '%',                 top: (Math.ceil((i + 1) / 6.1) - 1) * 210 + 10,               };*!/               var css = {                 left: (Math.ceil((i) % 6.1) - 1) * 1 + 1 + '%',                 // left: (Math.ceil((i) % 6.1) -1) * 1 + 1 + 'px',                 top: (Math.ceil((i + 1) / 7.1) - 1) * 20 + 20,               };             }             var a = '#intercomBox' + i;             var b = '#intercomBox-up' + i;             // $(a).Tdrag({             //       scope: '.intercomBoxContainer',             //       handle: b,//手柄,             //       pos: true,             //       dragChange: true,             //       changeMode: 'sort',             //     },             // );             $(a).css(css);           }         });*/        const tbody = document.querySelector('.intercomBox');        /* Sortable.create(tbody, {           onEnd({ newIndex, oldIndex }) {             console.log(newIndex);             const currRow = _this.intercomBoxDatas.splice(oldIndex, 1)[0]             _this.intercomBoxDatas.splice(newIndex, 0, currRow)           }         })*/        /*this.sortable = Sortable.create(tbody, {          animation: 180,          delay: 0,          onEnd: evt => {            const oldItem = this.intercomBoxDatas[evt.oldIndex]            this.intercomBoxDatas.splice(evt.oldIndex, 1)            this.intercomBoxDatas.splice(evt.newIndex, 0, oldItem)            console.log(evt.oldIndex,evt.newIndex);          }        })*/        var that = this;   setTimeout(()=> {             var el = document.getElementById('intercomBoxSortID');          this.sortable = Sortable.create(el, {               onEnd: (evt)=> {                 let itemEl = evt.item;              let oldIndex = evt.oldIndex;              let newIndex = evt.newIndex;              let temp = this.intercomBoxDatas[oldIndex];              if (oldIndex < newIndex) {                   for (var i = oldIndex; i < newIndex; i++) {                     this.intercomBoxDatas[i] = this.intercomBoxDatas[i + 1];                }              } else if (oldIndex > newIndex) {                   for (var i = oldIndex; i > newIndex; i--) {                     this.intercomBoxDatas[i] = this.intercomBoxDatas[i - 1];                }              }              this.intercomBoxDatas[newIndex] = temp;            },          });        }, 100);      }      ,      //默认排序对讲窗口      SortVideoTableNomal() {           /*初始化jquery*/        /* $(document).ready(() => {           /!*lua中的一个函数,math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.*!/           for (var i = 1; i <= this.intercomBoxDatas.length; i++) {             /!*   var css = {                  left: (Math.ceil((i) % 5.1) - 1) * 19 + 4 + '%',                  top: (Math.ceil((i + 1) / 6.1) - 1) * 100 + 10,                };*!/             if (window.screen.width == 1366) {               var css = {                 left: (Math.ceil((i) % 5.1) - 1) * 18 + 4 + '%',                 top: (Math.ceil((i + 1) / 6.1) - 1) * 150 + 10,               };             } else if (window.screen.width == 1920 && window.screen.height == 1280) {               var css = {                 left: (Math.ceil((i) % 6.1) - 1) * 1 + 1 + '%',                 top: (Math.ceil((i + 1) / 7.1) - 1) * 20 + 20,               };             } else {               /!*var css = {                 left: (Math.ceil((i) % 5.1) - 1) * 16.5 + 4 + '%',                 top: (Math.ceil((i + 1) / 6.1) - 1) * 210 + 10,               };*!/               var css = {                 left: (Math.ceil((i) % 6.1) - 1) * 1 + 1 + '%',                 top: (Math.ceil((i + 1) / 7.1) - 1) * 20 + 20,               };             }             var a = '#intercomBox' + i;             var b = '#intercomBox-up' + i;             // $(a).Tdrag({             //       scope: '.intercomBoxContainer',             //       handle: b,//手柄,             //       pos: true,             //       dragChange: true,             //       changeMode: 'sort',             //     },             // );             $(a).css(css);           }         });*/      }      ,