织梦网站栏目上海网站设计知名乐云seo

Vue3鼠标拖拽生成区域块并选中元素，选中的元素则背景高亮(或者其它逻辑)。

<script setup>
import { ref } from 'vue'// 区域ref
const regionRef = ref(null)// 内容ref
const itemRefs = ref(null)// 是否开启绘画区域
const enable = ref(false)// 鼠标开始位置
const start = ref({x: 0,y: 0
})// 区域块元素配置
const regionConfig = ref({top: '0px',left: '0px',width: '0px',height: '0px'
})// 鼠标点击
const onMousedown = (e) => {const { pageX, pageY } = estart.value.x = pageXstart.value.y = pageYregionConfig.value.top = pageY + 'px'regionConfig.value.left = pageX + 'px'enable.value = true
}// 鼠标弹起
const onMouseup = () => {enable.value = false
}// 鼠标移动
const onMousemove = (e) => {if (!enable.value) return falseconst { pageX, pageY } = e// 当前鼠标移动的位置减开始位置得到区域块宽高const x = pageX - start.value.xconst y = pageY - start.value.yregionConfig.value.width = Math.abs(x) + 'px'regionConfig.value.height = Math.abs(y) + 'px'// 鼠标移动的位置小于开始位置，当前鼠标的位置是区域块的位置if (x < 0) {regionConfig.value.left = pageX + 'px'}if (y < 0) {regionConfig.value.top = pageY + 'px'}// 获取区域块和内容的位置const boxRect = regionRef.value.getBoundingClientRect()itemRefs.value.forEach((item) => {const rect = item.getBoundingClientRect()// 判断区域块包裹内容元素则改变背景颜色if (boxRect.top <= rect.top && boxRect.bottom >= rect.bottom && boxRect.left <= rect.left && boxRect.right >= rect.right) {item.style.backgroundColor = 'rgb(10, 228, 10)'} else {item.style.backgroundColor = '#cbccce'}})
}
</script><template><mainclass="w_h_100 home"@mousedown="onMousedown"@mouseup="onMouseup"@mousemove="onMousemove"><div class="box"><divref="itemRefs"class="item"v-for="item in 10":key="item">{{ item }}</div></div><divref="regionRef"class="region":style="regionConfig"></div></main>
</template><style lang="less">
.home {display: flex;align-items: center;justify-content: center;.box {width: 200px;display: flex;flex-wrap: wrap;}.item {margin-right: 10px;margin-bottom: 10px;width: 30px;height: 30px;color: #fff;text-align: center;line-height: 30px;background-color: #cbccce;user-select: none;}.region {position: fixed;z-index: 10;border: 1px solid #0094ff;background-color: rgba(0, 148, 255, 0.1);}
}
</style>