vue實(shí)現(xiàn)多欄布局拖拽
本文實(shí)例為大家分享了vue實(shí)現(xiàn)多欄布局拖拽的具體代碼，供大家參考，具體內(nèi)容如下
一、目標(biāo)
vue 實(shí)現(xiàn)多個(gè)盒子（用戶根據(jù)實(shí)際場(chǎng)景決定盒子數(shù)量）自由拖拽，改變寬度。
二、應(yīng)用場(chǎng)景
可自由拖動(dòng)寬度的多欄布局。
最典型的案例：編輯器（eg:vscode,idea等）
三、組件設(shè)計(jì)
由于該組件盒子數(shù)量不確定，所以我們?cè)O(shè)計(jì)組件時(shí)參考了Vuetify中的Form和FormItem的設(shè)計(jì)。即：外層大盒子處理分發(fā)的拖拽事件，里層的盒子負(fù)責(zé)展示各個(gè)Item的內(nèi)容。
組件設(shè)計(jì)實(shí)現(xiàn)目標(biāo)：
<drag-box style="width: 100%; height: 100%;"> <drag-item>item1</drag-item> <drag-item>item2</drag-item> <drag-item>item3</drag-item> <drag-item>item4</drag-item> </drag-box>
四、實(shí)現(xiàn)
4.1 dragBox 靜態(tài)頁(yè)面
（通過插槽實(shí)現(xiàn)子元素的嵌套）
<template>
<div ref='dragBox' style='display: flex; width: 100%; height: 100%;'>
<slot></slot>
</div>
</template>
4.2 dragItem 頁(yè)面
（通過插槽實(shí)現(xiàn)drag-item內(nèi)部元素的嵌套）
<template>
<div ref="container" class="d-flex" style="min-width: 200px; position: relative;">
<div style="width: 100%; height: 100%;">
<slot>默認(rèn)信息</slot>
</div>
<!-- 拖拽條 -->
<div v-if="resizeShow" class="resize" />
</div>
</template>
<script>
export default {
props: {
// 控制拖拽條的是否顯示，默認(rèn)顯示
resizeShow: {
type: Boolean,
default: true
}
}
}
</script>
<style>
.resize {
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
cursor: col-resize;
background-color: #d6d6d6;
}
</style>
4.3 拖拽邏輯
拖拽的邏輯應(yīng)當(dāng)交給dragBox處理，而非dragItem。
4.3.1 在實(shí)現(xiàn)拖拽之前，應(yīng)當(dāng)給子元素（即：dragItem）進(jìn)行合理布局。
當(dāng)用戶未給 dragItem 分配初始寬度時(shí)，則默認(rèn)flex:1（平均分配剩余空間）。具體邏輯如下：
// 如果dragItem 沒有定義寬度，則flex=1
setDragItemFlex () {
const dragBox = this.$refs.dragBox
const childsLen = dragBox.children.length
for (let i = 0; i < childsLen; i++) {
const node = dragBox.children[i]
if (!node.style.width) {
// 如果沒有定義寬度，則flex=1
node.style.flex = 1
}
}
},
4.3.2 拖拽實(shí)現(xiàn)邏輯
應(yīng)當(dāng)為每個(gè)dragItem的拖動(dòng)條添加拖動(dòng)事件。完整的拖動(dòng)事件包括：鼠標(biāo)按下，鼠標(biāo)移動(dòng)，鼠標(biāo)抬起（拖動(dòng)結(jié)束）。
循環(huán)為每個(gè)拖動(dòng)條添加事件：
dragControllerDiv () {
const resize = document.getElementsByClassName('resize') // 拖拽條
// 循環(huán)為每個(gè)拖拽條添加事件
for (let i = 0; i < resize.length; i++) {
// 鼠標(biāo)按下事件
resize[i].addEventListener('mousedown', this.onMouseDown)
}
},
鼠標(biāo)按下邏輯：獲取鼠標(biāo)按下的初始位置，改變拖拽條顏色，添加move和up的監(jiān)聽事件。
onMouseDown (e) {
this.resizeBox = e.target
this.currentBox = this.resizeBox.parentNode// 當(dāng)前盒子
this.rightBox = this.getNextElement(this.currentBox)// 當(dāng)前盒子的下個(gè)兄弟節(jié)點(diǎn)
if (!this.rightBox) return
this.curLen = this.currentBox.clientWidth
this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的寬度
// 顏色改變提醒
this.resizeBox.style.background = '#818181'
this.startX = e.clientX
document.addEventListener('mousemove', this.onMousemove)
document.addEventListener('mouseup', this.onMouseup)
},
// 獲取下一個(gè)兄弟元素的兼容函數(shù)
getNextElement (element) {
if (element.nextElementSibling) {
return element.nextElementSibling
} else {
var next = element.nextSibling// 下一個(gè)兄弟節(jié)點(diǎn)
while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
next = next.nextSibling
}
return next
}
}
鼠標(biāo)移動(dòng)事件：計(jì)算并設(shè)置當(dāng)前盒子和右側(cè)盒子的寬度。
onMousemove (e) {
const endX = e.clientX
const moveLen = endX - this.startX // （endx-startx）= 移動(dòng)的距離
const CurBoxLen = this.curLen + moveLen // resize[i].left+移動(dòng)的距離=左邊區(qū)域最后的寬度
const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右側(cè)寬度=總寬度-左側(cè)寬度-其它盒子寬度
// 當(dāng)最小寬度時(shí)，無法繼續(xù)拖動(dòng)
if (CurBoxLen <= 200 || rightBoxLen <= 200) return
this.currentBox.style.width = CurBoxLen + 'px'// 當(dāng)前盒子的寬度
this.resizeBox.style.left = CurBoxLen // 設(shè)置左側(cè)區(qū)域的寬度
this.rightBox.style.width = rightBoxLen + 'px'
},
鼠標(biāo)抬起事件：銷毀mousedown和mousemove事件；恢復(fù)拖拽條的顏色。
onMouseup () {
// 顏色恢復(fù)
this.resizeBox.style.background = '#d6d6d6'
document.removeEventListener('mousedown', this.onMouseDown)
document.removeEventListener('mousemove', this.onMousemove)
},
在mounted鉤子函數(shù)里添加對(duì)應(yīng)的事件。
mounted () {
this.setDragItemFlex()
this.dragControllerDiv()
},
引入并注冊(cè)使用該組件：
<template>
<div id="app" style="width: 100%; height: 100vh; border:1px solid #ccc;">
<drag-box style="width: 100%; height: 100%;">
<drag-item style="width: 20%;">item1</drag-item>
<drag-item>item2</drag-item>
<drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item>
</drag-box>
</div>
</template>
<script>
import {DragBox, DragItem} from './components/dragLayouter'
export default {
name: 'App',
components: {
DragBox,
DragItem
}
}
</script>
五、運(yùn)行結(jié)果
具體樣式可后期修改。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中有一個(gè)很神奇的東西叫v-model，它可以完成我們的需求。，本文重點(diǎn)給大家介紹vue中使用v-model完成組件間的通信,需要的朋友可以參考下2019-08-08
Vue2集成Lodop插件實(shí)現(xiàn)在線打印功能
這篇文章主要為大家詳細(xì)介紹了Vue2如何集成Lodop插件實(shí)現(xiàn)在線打印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達(dá)式的值，來決定在 DOM 中是渲染還是銷毀元素或組件。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例
今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Teleport是一個(gè)內(nèi)置組件,它可以將一個(gè)組件內(nèi)部的一部分模板傳送到該組件的 DOM 結(jié)構(gòu)外層的位置去,本文主要介紹了Vue3中Teleport用法小結(jié),感興趣的可以了解一下2025-04-04
vite是一個(gè)由vue作者尤雨溪專門為vue打造的開發(fā)利器,其目的是使 vue項(xiàng)目的開發(fā)更加簡(jiǎn)單和快速,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3+Vite中使用JSX的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue 監(jiān)聽窗口變化對(duì)頁(yè)面部分元素重新渲染操作
這篇文章主要介紹了vue 監(jiān)聽窗口變化對(duì)頁(yè)面部分元素重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07