This is my participation 8 The fourth of the yuegengwen challenge 14 God , Check out the activity details ：8 Yuegengwen challenge

【V3.0】 Bind and drag with custom instructions

Official documents ：

cn.vuejs.org/v2/guide/cu…

Drag the div：

<div></div>
<div v-barDrag></div>
<div></div>
 Copy code 

Custom instruction function ：

Vue.directive('barDrag', {
  bind (el, binding, vnode, oldVnode) {
    Vue.nextTick(() => { //  no need nextTick No other dom node 
      //  Set whether to move the id 
      let removeFlag = false
      //  Get the left scaled div object 
      let bar = el
      let dragLeft = el.previousElementSibling.style
      let dragRight = el.nextElementSibling.style
      let doc = el.parentNode
      let x = 0 //  Mouse  X  and  Y  Axis coordinates 
      //  Mount mouse event 
      bar.addEventListener('mousedown', moveDownMouse, false)
      //  Note that the movement and mouse out of focus events need to be bound to dom On , If only bound to bar Only in bar Move up \ Out of focus is effective 
      doc.addEventListener('mousemove', mouseMove, false)
      doc.addEventListener('mouseup', mouseUp, false)

      function moveDownMouse (e) {
        removeFlag = true
        //  After pressing the element   Calculate the coordinates of the current mouse and object after calculation 
        x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
        //  Support  setCapture when   Capture focus  //  Set up events  //  The binding event 
        if (bar.setCapture) {
          bar.setCapture()
          bar.onmousemove = function (ev) {
            mouseMove(ev || event)
          }
          bar.onmouseup = mouseUp
        } else {
          // bar.addEventListener('mousemove', mouseMove, false)
          // bar.addEventListener('mouseup', mouseUp, false)
          // jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
        }
        //  Prevent default events from happening 
        e.preventDefault()
        store.state.dragBar = false //  Used to inform echarts When the width changes, reload 
      }
      //  Mobile event 
      function mouseMove (e) {
        if (removeFlag) {
          //  In the super invincible operation of the universe 
          let width = e.clientX - x
          if (width < 200) {
            dragLeft.width = '200px'
          } else if (width > 400) {
            dragLeft.width = '400px'
          } else {
            dragLeft.width = width + 'px'
          }
          //  If the right width is not calculated , The drag bar will be squeezed   Subtract the width of the drag bar. Note the style .dragBar The settings are consistent 
          dragRight.width = 'calc((100% - 3px) - ' + dragLeft.width + ')'
        }
      }
      //  Stop the event 
      function mouseUp () {
        removeFlag = false
        //  Support  releaseCapture when  //  Release focus  //  Remove events  //  Uninstall Events 
        if (bar.releaseCapture) {
          bar.releaseCapture()
          bar.onmousemove = bar.onmouseup = null
        } else {
          // bar.removeEventListener('mousemove', mouseMove, false)
          // bar.removeEventListener('mouseup', mouseUp, false)
          // jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
        }
        store.state.dragBar = true //  Used to inform echarts When the width changes, reload 
      }
    })
  }
})
 Copy code 

Just drag the middle bar div binding v-barDrag Command can .

———————————— The following methods are old For record only ————————————

【V2.0】： Add a drag bar to change the width of the outer container

effect ：

Code ：

html Pay attention to the four parts id Bind to

<el-container id="dept">
    <el-aside width="220px" id="drag-dept-left">
    </el-aside>
    <div id="dragBar-dept" class="dragBar"></div>
    <el-main id="drag-dept-right" class="drag-right">
    </el-main>
</el-container>
 Copy code 

css For reference only, modify the width control by yourself

.dragBar {
  width: 3px;
  height: 100%;
  background: #01e4fd;
  cursor: e-resize;
}
.drag-right {
  padding-right: 0px;
  width: calc(100% - 213px);
}
 Copy code 

js call

mounted () {
    //  Mount the corresponding method to the zoom drag bar   Enter the reference ( Drag bar ID, left ID, On the right side ID, Outer layer ID)
    this.$_comFun.bindResize('dragBar-dept', 'drag-dept-left', 'drag-dept-right', 'dept')
  },
 Copy code 

js Global variables

export default new Vuex.Store({
    state: {
      //  Drag the scroll bar to change the internal div Width 
      dragBar: false
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
})
 Copy code 

js Public methods

import store from '../index'

//  Drag the zoom bar to change the left div Width method 
bindResize (barID, leftID, rightID, docID) {
    //  Set whether to move the id 
    let removeFlag = false
    //  Get the left scaled div object 
    let bar = document.getElementById(barID)
    let dragLeft = document.getElementById(leftID).style
    let dragRight = document.getElementById(rightID).style
    let doc = document.getElementById(docID)
    let x = 0 //  Mouse  X  and  Y  Axis coordinates 
    //  Mount mouse event 
    bar.addEventListener('mousedown', moveDownMouse, false)
    //  Note that the movement and mouse out of focus events need to be bound to dom On , If only bound to bar Only in bar Move up \ Out of focus is effective 
    doc.addEventListener('mousemove', mouseMove, false)
    doc.addEventListener('mouseup', mouseUp, false)

    function moveDownMouse (e) {
      removeFlag = true
      //  After pressing the element   Calculate the coordinates of the current mouse and object after calculation 
      x = e.clientX - bar.offsetWidth - dragLeft.width.replace('px', '')
      //  Support  setCapture when   Capture focus  //  Set up events  //  The binding event 
      if (bar.setCapture) {
        bar.setCapture()
        bar.onmousemove = function (ev) {
          mouseMove(ev || event)
        }
        bar.onmouseup = mouseUp
      } else {
        // bar.addEventListener('mousemove', mouseMove, false)
        // bar.addEventListener('mouseup', mouseUp, false)
      }
      //  Prevent default events from happening 
      e.preventDefault()
      store.state.dragBar = false
    }
    //  Mobile event 
    function mouseMove (e) {
      if (removeFlag) {
        //  In the super invincible operation of the universe 
        let width = e.clientX - x
        if (width < 200) {
          dragLeft.width = '200px'
        } else if (width > 400) {
          dragLeft.width = '400px'
        } else {
          dragLeft.width = width + 'px'
        }
        //  If the right width is not calculated , The drag bar will be squeezed 
        dragRight.width = 'calc(100% - ' + dragLeft.width + ')'
      }
    }
    //  Stop the event 
    function mouseUp () {
      removeFlag = false
      //  Support  releaseCapture when  //  Release focus  //  Remove events  //  Uninstall Events 
      if (bar.releaseCapture) {
        bar.releaseCapture()
        bar.onmousemove = bar.onmouseup = null
      } else {
        // bar.removeEventListener('mousemove', mouseMove, false)
        // bar.removeEventListener('mouseup', mouseUp, false)
      }
      store.state.dragBar = true
    }
}
 Copy code 

【V1.0】： Add a drag bar to change the width of the outer container

effect ：

Add a drag bar

<div id="dragBar"></div>
 Copy code 

After the current component is loaded , Bind events to the drag bar

  mounted () {
    //  Mount the corresponding method to the zoom drag bar   Enter the reference ( Drag the bar object ,  left div Of ID)
    this.bindResize(document.getElementById('dragBar'), 'menu')
  },
  methods: {
	  //  Drag the zoom bar to change the left div Width method 
	  bindResize (bar, menu) {
	    /* eslint-disable */
	    //  Get the left scaled div object 
	    let els = document.getElementById(menu).style
	    let x = 0 //  Mouse  X  and  Y  Axis coordinates 
	    jQuery(bar).mousedown(function (e) {
	      //  After pressing the element   Calculate the coordinates of the current mouse and object after calculation 
	      x = e.clientX - bar.offsetWidth - jQuery('#' + menu).width()
	      //  Support  setCapture when   Capture focus  //  Set up events  //  The binding event 
	      if (bar.setCapture) {
	        bar.setCapture()
	        bar.onmousemove = function (ev) {
	          mouseMove(ev || event)
	        }
	        bar.onmouseup = mouseUp
	      } else {
	        jQuery(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp)
	      }
	      //  Prevent default events from happening 
	      e.preventDefault()
	    })
	    //  Mobile event 
	    function mouseMove (e) {
	      //  In the super invincible operation of the universe 
	      els.width = e.clientX - x + 'px'
	    }
	    //  Stop the event 
	    function mouseUp () {
	      //  Support  releaseCapture when  //  Release focus  //  Remove events  //  Uninstall Events 
	      if (bar.releaseCapture) {
	        bar.releaseCapture()
	        bar.onmousemove = bar.onmouseup = null
	      } else {
	        jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp)
	      }
	    }
	    /* eslint-enable */
	  }
  }
 Copy code