使用js获取选中的dom元素 并改变选中（有序dom）的状态

一个效果图，一段代码， 就这样吧。

<template>
  <div
    ref="checkListRef"
    class="fizz-container h-full"
    @mouseup.stop="mouseupCon"
    @mousedown.stop="mousedownCon"
    @mouseover="mouseoverCon"
    @mouseout="mouseoutCon"
  >
    <el-checkbox-group :value="checkedList" class="user-select-auto">
      <el-checkbox
        v-for="(item, i) in checkArr"
        :key="item.id"
        :label="item.id"
        class="m-4"
        :data-index="i"
        @click.native.prevent.stop="checkItem(item.id)"
        >{{ item.label }}el-checkbox
      >
    el-checkbox-group>
  div>
template>

<script>
import { generateUUID } from '@/utils/utils'
const checkArr = new Array(200).fill(null).map((_, i) => {
  const id = generateUUID()
  return {
    id,
    value: id,
    label: i,
    checked: false,
  }
})
export default {
  data() {
    return {
      checkArr,
      checkedList: [],
      selectedIdList: [],
      isOver: false, // 是否在容器
      isDown: false, // 是否在容器按下状态
    }
  },
  methods: {
    mousedownCon() {
      this.isDown = true
    },
    mouseupCon() {
      if (this.isDown === false || this.isOver === false) {
        return
      }
      const sel = window.getSelection()
      console.log(sel)
      const { anchorNode, extentNode } = sel
      if (!anchorNode || !extentNode) {
        return
      }
      const { startIndex, endIndex } = this.getSEIndex(anchorNode, extentNode)
      if (startIndex === endIndex) {
        return
      }
      this.setChecked(startIndex, endIndex)
      this.isDown = false
      window.getSelection().removeAllRanges()
      this.selectedIdList = []
    },
    getSEIndex(anchorNode, extentNode) {
      let startDom = anchorNode
      let endDom = extentNode
      if (extentNode.classList && extentNode.classList.contains('el-checkbox__input')) {
        endDom = extentNode.parentElement
      } else if (extentNode.nodeName === '#text') {
        endDom = extentNode.parentElement.parentElement
      }
      if (anchorNode.classList && anchorNode.classList.contains('el-checkbox__input')) {
        startDom = anchorNode.parentElement
      } else if (anchorNode.nodeName === '#text') {
        startDom = anchorNode.parentElement.parentElement
      }

      let startIndex = Number(startDom.dataset.index)
      let endIndex = Number(endDom.dataset.index)
      if (parseInt(startIndex) > parseInt(endIndex)) {
        const temp = endIndex
        endIndex = startIndex
        startIndex = temp
      }
      return { startIndex, endIndex }
    },
    setChecked(startIndex, endIndex) {
      for (let i = startIndex; i < endIndex + 1; i++) {
        const id = this.checkArr[i].id
        const ind = this.checkedList.findIndex(x => x === id)
        if (ind > -1) {
          this.checkedList.splice(ind, 1)
        } else {
          this.checkedList.push(id)
        }
      }
      // const mergedArray = [...this.checkedList, ...this.selectedIdList].filter((value) => {
      //   return !array1.includes(value) || !array2.includes(value);
      // });

      // const mergedArray = [...new Set([...this.checkedList, ...this.selectedIdList])]
      // this.checkedList = mergedArray
    },
    mouseoutCon() {
      this.isOver = false
    },
    mouseoverCon() {
      this.isOver = true
    },
    checkItem(id) {
      const ind = this.checkedList.findIndex(x => x === id)
      if (ind > -1) {
        this.checkedList.splice(ind, 1)
      } else {
        this.checkedList.push(id)
      }
    },
  },
}
script>
<style lang="less">
.el-checkbox {
  user-select: auto;
}
.user-select-none {
  user-select: none;
}
.user-select-auto {
  user-select: auto;
}
.el-checkbox__input {
  user-select: none;
}
.el-checkbox-group::selection {
  background-color: #fff;
  color: #206ef7;
}
.el-checkbox__label::selection {
  background: #fff;
  color: #206ef7;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147