vue2实现盒子拖拽宽度完整版

 

1，DragBox组件

<template>
    <div ref='dragBoxRef' class="dragBox" >
        <slot></slot>
    </div>
 </template>
 <script>
 export default {
   name:"dragBox",
   props:{
    itemMinWidth:{
        type:Number,
        default:200
    },//孩子盒子的最小宽度
    resizeBoxBg:{
        type:String,
        default:'#818181'
    },//长按拓展条背景色
   },
   componets:{
   },
   data(){
         return{
           fileUrl:'',
           filename:''
         }
   },
   methods:{
	// 如果dragItem 没有定义宽度，则flex=1
    setDragItemFlex () {
      const dragBox = this.$refs.dragBoxRef
    //   console.log(dragBox);
    //   return
      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
        }
      }
    },
    dragControllerDiv () {
        const resize = document.getElementsByClassName('resize') // 拖拽条
        // 循环为每个拖拽条添加事件
        for (let i = 0; i < resize.length; i++) {
            // 鼠标按下事件
            resize[i].addEventListener('mousedown', this.onMouseDown)
        }
    },
    onMouseDown (e) {
        this.resizeBox = e.target
        this.currentBox = this.resizeBox.parentNode// 当前盒子
        this.rightBox = this.getNextElement(this.currentBox)// 当前盒子的下个兄弟节点
        if (!this.rightBox) return
        this.curLen = this.currentBox.clientWidth
        this.otherBoxWidth = this.$refs.dragBoxRef.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的宽度
        // 颜色改变提醒
        this.resizeBox.style.background = this.resizeBoxBg
        this.startX = e.clientX
        document.addEventListener('mousemove', this.onMousemove)
        document.addEventListener('mouseup', this.onMouseup)
    },
    onMousemove (e) {
        const endX = e.clientX
        const moveLen = endX - this.startX // （endx-startx）= 移动的距离
        const CurBoxLen = this.curLen + moveLen // resize[i].left+移动的距离=左边区域最后的宽度
        const rightBoxLen = this.$refs.dragBoxRef.clientWidth - CurBoxLen - this.otherBoxWidth // 右侧宽度=总宽度-左侧宽度-其它盒子宽度
        // 当最小宽度时，无法继续拖动
        if (CurBoxLen <= this.itemMinWidth || rightBoxLen <= this.itemMinWidth) return
        this.currentBox.style.width = CurBoxLen + 'px'// 当前盒子的宽度
        this.resizeBox.style.left = CurBoxLen // 设置左侧区域的宽度
        this.rightBox.style.width = rightBoxLen + 'px'
    },
    onMouseup () {
        // 颜色恢复
        this.resizeBox.style.background = '#d6d6d6'
        document.removeEventListener('mousedown', this.onMouseDown)
        document.removeEventListener('mousemove', this.onMousemove)
    },

    // 获取下一个兄弟元素的兼容函数
    getNextElement (element) {
        if (element.nextElementSibling) {
            return element.nextElementSibling
        } else {
            var next = element.nextSibling// 下一个兄弟节点
            while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
            next = next.nextSibling
            }
            return next
        }
    }

   },
   beforeCreate(){
 
   },
   created(){
   
   },
   beforeMount(){
 
   },
   mounted(){
    this.setDragItemFlex()
    this.dragControllerDiv()
   }
 }
 </script>
 <style scoped>
 .dragBox{
    display: flex;
    width: 100%;
    height: 100%;
 }
 </style>
 

 2，DragItem组件

<template>
    <div ref="container" class="d-flex" >
        <div style="width: 100%; height: 100%;">
            <slot>默认信息</slot>
        </div>
		<!-- 拖拽条 -->
        <div v-if="resizeShow" :style="{'width':resizeWidth}" class="resize" />
    </div>
</template>
<script>
export default {
  props: {
  // 控制拖拽条的是否显示，默认显示
    resizeShow: {
      type: Boolean,
      default: true
    },
  //拖拽条默认宽度
    resizeWidth:{
        type:String,
        default:"4px"
    }
  }
}
</script>
<style>
.resize {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    cursor: col-resize;
    background-color: #d6d6d6;
}
.resize:hover{
    width: 4px !important;
}
.d-flex{
    position: relative;
}
</style>

3，组件调用

<template>
    <div id="dragDiv" class="dragDiv"  >
      <drag-box :itemMinWidth="100" style="width: 100%; height: 100%;">
        <drag-item style="width: 20%;" resizeWidth="2px" >item1</drag-item>
        <drag-item resizeWidth="2px" >item2</drag-item>
        <drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item>
      </drag-box>
    </div>
  </template>
  
  <script>
  import DragBox from './dragBox/index.vue'
  import DragItem from './dragBox/dragItem.vue'

  export default {
    name: 'dragDiv',
    components: {
      DragBox,
      DragItem
    }
  }
  </script>
   <style scoped>
    .dragDiv{
        width: 100%;
        height: 100vh;
        border:1px solid #ccc;
    }
    </style>