client-base-v5/src/widget/TableHeaderSort.vue

<template>
  <div id="app" style="width:600px">
    <ul>
      <li v-for="(item,index) in headDto.tableHeaderSortLineDtos" :key="index" class="item" draggable="true" @dragstart="handleDragStart($event, item)" @dragover.prevent="handleDragOver($event, item)" @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd($event, item)">
        <tr>
          <td><input autocomplete="off" type="checkbox" class="select-checkbox" v-model="item.visible" @click="isVisible"></td>
          <td>
            <div>{{item.tableHeaderName}}</div>
          </td>
        </tr>
      </li>
    </ul>
  </div>
</template>
<script>
import TableHeaderSortResource from "../../api/commom/TableHeaderSortResource.js";

export default {
  props: ["dataDto"],
  data: function () {
    return {
      isSelect: true,
      dragging: null,
      headDto: {
        tableName: "",
        tableHeaderSortLineDtos: [],
      },
    };
  },

  methods: {
    isVisible: function () {
      var _self = this;
      console.log(_self.headDto);
      window.setTimeout(function () {
        _self.saveOrUpdateheader();
      }, 1000);
    },
    loadHeader: function () {
      var _self = this;
      var dto;
      TableHeaderSortResource.LoadTableHeaderInfo(_self.dataDto.tableName).then(
        (successData) => {
          if (successData.id == null) {
            _self.headDto = {
              tableName: _self.dataDto.tableName,
              tableHeaderSortLineDtos: _self.dataDto.tableHeaderSortLineDtos,
            };
          } else {
            _self.headDto = {
              tableName: _self.dataDto.tableName,
              tableHeaderSortLineDtos: successData.tableHeaderSortLineDtos,
            };
          }
          this.$emit("headChange", _self.headDto);
        },
        (errorData) => {
          console.log("失败");
        }
      );
    },
    saveOrUpdateheader: function () {
      var _self = this;
      TableHeaderSortResource.createOrUpdateSort(_self.headDto).then(
        (successData) => {
          console.log("保存成功");
        },
        (errorData) => {
          console.log("保存失败");
        }
      );
    },
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    // DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。
    // 如果dropEffect 属性设定为none,则不允许被拖放到目标元素中。
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move"; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.headDto.tableHeaderSortLineDtos];
      console.log(newItems);

      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      // 替换
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      // 让item的颜色等于新交换的颜色
      this.headDto.tableHeaderSortLineDtos = newItems;
      for (var i = 0; i < this.headDto.tableHeaderSortLineDtos.length; i++) {
        var item = this.headDto.tableHeaderSortLineDtos[i];
        item.sort = i;
      }
      var _self = this;
      window.setTimeout(function () {
        _self.saveOrUpdateheader();
      }, 1500);
    },
  },
  mounted: function () {
    this.loadHeader();
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
};
</script>
<style scoped>
ul {
  width: 600px;
  list-style: none;
  padding-bottom: 20px;
}
.item {
  cursor: pointer;
  height: 30px;
  line-height: 24px;
  border-radius: 4px;
  padding: 10px;
}
</style>