Vue project small Effect – drag and drop to change left and right width

The vue-Element project needs to have a drag effect to change the width as shown below:

1. Package components (ideas, problems and solutions)

I packaged it into a component, and the children’s shoes needed can be taken over and used directly. This is also my reference to others, but I forgot who the blogger is for a long time.

  • The first one passed from the parent component contains the outer big box, with the left and right class name objects inside
  • Each person defines a different class name so you need to define an object from the parent component to pass in so that you can get the appropriate width to change the size
  • Define a variable that stores the width of the current viewable area for easy listening
  • Problem: Because the width of the right side of the current window does not change with the width of the window, causing the right side to be left blank, the width is not adaptive (it will be retrieved when you drag it, so it is ok)
  • So HERE I listen and recalculate the width on the right side when the window changes for self-adaptation
  • Finally, don’t forget to unlog the window event listening method before the component is destroyed, because this method is global and will affect other pages if not unlogged.
export default { name: "DragAdjustWidth ", props:["styleLoc"], // Const adjustWidth: < span style =" adjustWidth ", props:["styleLoc"], // Const adjustWidth: Document. Body. ClientWidth, / / get the current viewing area width}; }, created() {}, mounted() { this.dragControllerDiv(); let _this = this; / / assignment vue of this window. The addEventListener (' resize, () = > {this. ScreenWidth = document. Body. ClientWidth})}, watch: { screenWidth(newVal, oldVal) { let styleLoc = this.styleLoc; var resize = document.getElementsByClassName('drag'); var mid = document.getElementsByClassName(styleLoc.right); for (let i = 0; i < resize.length; i++) { mid[i].style.width = (newVal - resize[i].offsetLeft) + 'px'; } }, }, components: { }, methods: { dragControllerDiv () {}, beforeDestroy () { window.onresize = null; }}};Copy the code

2. Drag events

Here we go – mainly this method, haha

  • Get the current big box box, and the left and right DOM elements, resize
  • When we get the resize, it’s an array, so we’re looping over it, so we don’t need that
  • Get the left width of the resize when the mouse is pressed down, and the position of the mouse click
  • Resize [I]. Left + moving distance = last width of left region ———— container width – width of left region = width of right region
  • You can set the minimum width on the left, I’m setting 200 here, and you can take a variable and store it so that you can change it in the parent component
  • Drag to dynamically set the width of the left side area
  • When the mouse is released, the mouse event is cancelled
dragControllerDiv () { let styleLoc = this.styleLoc; var resize= document.getElementsByClassName('drag'); var left = document.getElementsByClassName(styleLoc.left); var mid = document.getElementsByClassName(styleLoc.right); var box = document.getElementsByClassName(styleLoc.box); for (let i = 0; i < resize.length; I ++) {resize[I].onmouseDown = function (e) {resize[I].background = '#818181'; var startX = e.clientX; resize[i].left = resize[i].offsetLeft; Document. onmousemove = function (e) {var endX = e.clientx; var moveLen = resize[i].left + (endX - startX); // (endx-startx) = distance moved. Var maxT = box[I].clientWidth -resize [I].offsetwidth; If (moveLen < 200) moveLen = 200; If (moveLen > maxt-150) moveLen = maxt-150; Resize [I]. Style. Left = moveLen; // Set the width of the left area for (let j = 0; j < left.length; j++) { left[j].style.width = moveLen + 'px'; mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px'; }}; Document.onmouseup = function (evt) {resize[I].background = '#d6d6d6'; document.onmousemove = null; document.onmouseup = null; resize[i].releaseCapture && resize[i].releaseCapture(); // You should call ReleaseCapture() to release mouse messages when you no longer need them. resize[i].setCapture && resize[i].setCapture(); // This function sets mouse capture return false in the specified window belonging to the current thread; }; }}},Copy the code

Styles 3.

You can modify this style by yourself

<style lang=" SCSS "scoped > /* Drag div style */. Drag {cursor: col-resize; position: relative; top: 300px; background-color: #d6d6d6; border-radius: 5px; margin-top: -10px; width: 10px; height: 50px; line-height: 50px; background-size: cover; background-position: center; font-size: 32px; color: white; } /* Drag :hover {color: #444444; } </style>Copy the code

My effect is realized after the performance, if you have anything you want to ask after watching, you can comment, I will reply in time. If there is any question above, welcome to raise, I will correct.