Vue2题目拖拽排序组件

1、组件

<template>
  <div>
    <div>
      <div class="num-draggable">
        <div v-for="(item, index) in numbers" :key="index"
             class="list-item"
             :class="{'unDrag' : item.use === 1}"
             :draggable="item.use == 0"
             @dragstart="dragStart(item)"
             @dragend="dragEnd"
             @drop="drop"
             @dragover="dragEnd"
        >
          0{{ item.value }}
        </div>
      </div>
    </div>

    <div class="quesOpt">
      <div class="opt-content">

        <div class="box-item" v-for="(item, index) in options" :key="index">
          <div class="item-index uncheck-item-list" @dragover="dragEnd" @drop="dropEnter(item)" v-if="item.idx == '0'">
          </div>
          <div class="list-item item-index" draggable="true" @dragstart="backStart(item)" @dragover="dragEnd"
               @drop="dropEnter(item)" v-if="item.idx != '0'">
            0{{ item.idx }}
          </div>
          <div class="choose">
            <div class="pic">
              <img draggable="false" :src="item.filePath">
            </div>
            <div class="word">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

export default {
  name: "dragSortQue",
  components: {},
  props: {
    options: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      numbers: [
        // {
        //   value: 1,
        //   use: 0
        // }
      ],
      draggingIndex: -1,
      backItem: null
    };
  },
  mounted() {
    this.initNum();
  },
  methods: {
    initNum() {
      let arr = [];
      this.numbers = [];
      this.options.forEach((item, index) => {
        let x = (index + 1) + ''
        let obj = {
          value: x,
          use: 0
        }
        this.numbers.push(obj);
        if (item.idx != '0'){
          arr.push(item.idx);
        }
      });

      for (let i = 0; i < arr.length; i++) {
        let num = arr[i];
        this.numbers.forEach((item, index) => {
          if (num == item.value){
            item.use = 1;
          }
        })
      }
    },
    dragStart(item) {
      this.draggingIndex = item.value;
    },
    backStart(item) {
      this.backItem = item;
    },
    drop(e) {
      if (this.backItem == null) {
        return;
      }
      this.numbers.forEach((item, index) => {
        if (item.value == this.backItem.idx) {
          item.use = 0;
        }
      });

      this.options.forEach((item, index) => {
        if (item.id == this.backItem.id) {
          item.idx = 0;
        }
      });
      this.$emit('getDrag', this.options)
    },
    dragEnd(e) {
      e.preventDefault();
    },
    dropEnter(obj) {
      if (this.draggingIndex <= 0) {
        return;
      }

      this.numbers.forEach((item, index) => {
        if (item.value == obj.idx) {
          item.use = 0;
        }
        if (item.value == this.draggingIndex) {
          item.use = 1;
        }
      });
      obj.idx = this.draggingIndex;

      this.draggingIndex = -1;

      this.$emit('getDrag', this.options)

    }
  },
  watch: {
    options(newVal, oldVal) {
      this.initNum();
    }
  }
}
</script>

<style scoped>
.list-item {
  width: 44px;
  height: 44px;
  line-height: 44PX;
  background-image: url("../../../../../public/imgs/bgNum.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  margin: 10px;
  cursor: pointer;
}

.uncheck-item-list {
  width: 100%;
  height: 100%;
  line-height: 34PX;
  //border: 1px dashed #c0c4cc;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  margin: 10px;
  cursor: pointer;
}

.item-index {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 999;
}

img {
  width: 28.5rem;
  height: 17.8rem;
}

.quesOpt {
  display: flex;
  margin-top: 30px;

  .opt-content {
    display: flex;
    flex-wrap: wrap;

    .box-item {
      position: relative;
      width: 27.5rem;
    }
  }
}

.choose {
  margin-right: 20px;
  padding-bottom: 22px;

  .pic {
    text-align: center;
    position: relative;
    width: 28.5rem;
    height: 17.8rem;
  }

  .word {
    color: black;
    line-height: 22px;
    margin-top: 10px;
    margin-left: 1rem;
  }
}

.num-draggable {
  display: flex;
  justify-content: center;
  width: 95%;
  height: 60px;
  border: 5px solid #00827A;
  border-radius: 30px;
}

.unDrag {
  filter: grayscale(1);
  cursor: none !important;
}
</style>

2、使用

    <drag-sort-que :options="vm.activeOptions" @getDrag="getDrag"></drag-sort-que>