对讲排序备份

之前用的是通过css控制位置，然后支持拖动，
现在使用flex布局，拖动排序即可

 //添加排序对讲窗口
      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);
           }
         });*/
      }
      ,