This is the 14th day of my participation in the August Text Challenge.More challenges in August

[V3.0] Use custom instruction binding drag

Official documents:

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

Drag the div:

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

Custom instruction function:

Vue.directive('barDrag', { bind (el, binding, vnode, OldVnode) {vue.nexttick (() => {// Do not use nextTick to get other DOM nodes // set whether to move the flag 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 // Mount the mouse event bar.addeventListener (' mouseDown ', moveDownMouse, false) // Note that the movement and mouse out-of-focus events need to be bound to the DOM, AddEventListener ('mouseup', mouseup, 'mousemove', false) Function moveDownMouse (e) {removeFlag = true x = e.clientx-bar.offsetwidth - dragLeft.width.replace('px', 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 notify echarts etc. of reloading due to width change} // Move event function MouseMove (e) {if (removeFlag) {let width = e.clientx -x if (width < 200) {dragleft. width = '200px'} Else if (width > 400) {dragleft. width = '400px'} else {dragleft. width = width + 'px'} Width = 'calc((100%-3px) - '+ dragleft.width + ')'}} // Stop the event function MouseUp () {removeFlag = false if (bar.releasecapture) {mouseUp () {removeFlag = false 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 = trueCopy the code

Just bind the v-Bardrag directive to the drag bar div in the middle.

———————————— The following methods are older for the record only ————————————

[V2.0] : Added a drag bar to change the width of the outer container

Effect:

Code:

HTML note the id binding of the four sections

<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 the code

The CSS is for reference only

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

Js calls

// Mounted () {// Select * from the left of the dragbar. $_comfun. bindResize(' dragbar-dept ', 'drag-dept-left', 'drag-dept-right', 'dept')},Copy the code

Js global variable

Export default new vuex. Store({state: {// drag the scroll bar to change the width of the internal div dragBar: false}, mutations: {}, actions: {}, modules: {}})Copy the code

Js public methods

import store from '.. BindResize (barID, leftID, rightID, DocID) {// Set whether to move the flag let removeFlag = false // get the zoomed left 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 False) // Note that movement and mouse out-of-focus events need to be bound to the DOM, AddEventListener ('mouseup', mouseup, 'mousemove', false) Function moveDownMouse (e) {removeFlag = true x = e.clientx-bar.offsetwidth - dragLeft.width.replace('px', 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, Function mouseMove (e) {if (removeFlag) {function mouseMove (e) {if (removeFlag) { // let width = e.clientx -x if (width < 200) {dragleft. width = '200px'} else if (width > 400) { Dragleft. width = '400px'} else {dragleft. width = width + 'px'} Width = 'calc(100% - '+ dragleft.width + ')'}} function mouseUp () {removeFlag = false If (bar.releasecapture) {bar.releasecapture () bar.onMousemove = // Release focus // Remove event // Uninstall event bar.onmouseup = null } else { // bar.removeEventListener('mousemove', mouseMove, false) // bar.removeEventListener('mouseup', mouseUp, false) } store.state.dragBar = true } }Copy the code

[V1.0] : Added drag bar to change the width of the outer container

Effect:

Add a drag bar

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

Bind events to the drag bar after the current component is loaded

// Mounted () {this.bindResize(document.getelementById ('dragBar'), 'menu')}, methods: {// Zoom bar drag to change the width of the left div. Menu) {/* eslint-disable */ / get the left scaled div object let els = document.getelementByid (menu). Style let x = 0 // mouse x and Y coordinates JQuery (bar).mousedown(function (e) {x = e.clientx-bar.offsetwidth - jQuery('#' + Menu).width() // Support setCapture capture focus // set event // bind event if (bar.setCapture) {bar.setCapture() bar.onmousemove = function (ev) { mouseMove(ev || event) } bar.onmouseup = mouseUp } else { jQuery(document).bind('mousemove', mouseMove).bind('mouseup', Function mouseMove (e) {els.width = e.clientx -x + Function mouseUp () {if (bar.releasecapture) {function mouseUp () { bar.releaseCapture() bar.onmousemove = bar.onmouseup = null } else { jQuery(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp) } } /* eslint-enable */ } }Copy the code