Click “like” and then see, wechat search ** [Big Move the world] pay attention to this person without dACHang background, but with an upward positive attitude. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Recently open source a Vue component, is not perfect, welcome everyone to improve it, also hope you can give a star support, thank you.

Making address:Github.com/qq449245884…

Demo case

www.longstudy.club/vue-drag-sc…

Recently, I am working on a new project, and I have a need like this:

Simple description, is the mouse drag page, the whole page will move with the mouse drag, if the page has content, the content inside also need to drag the outer layer of the whole move to.

At first, I didn’t have much idea, so I posted a moment, and got a lot of answers, mainly using drag and drop, but this drag is only a single element, I want to drag the whole view.

Here’s another dead end.

Go back to the page with similar functionality and examine the DOM structure of the page as follows:

This layer makes the page wide and high. To hide the scrollbar, set overflow: hidden; When I looked at this setting, I suddenly realized that it was using drag to trigger the scroll bar. I thought, wow, this idea is feasible, NB.

Get ready to play

Create a vue project, I won’t go into details, I have posted the original code to Github, interested to see for yourself:

Github.com/qq449245884…

First add a big width and height to the outer layer:

<div class="vue-drag-scroll-wrapper" :style="zoomStye"> 'VueDragScroll', props: { msg: String }, data () { return { scale: 100 } }, computed: { zoomStye () { const INIT_WIDTH = 2208 const INIT_HEIGHT = 1206 const width = INIT_WIDTH * (1 + (100 - this.scale)/100)  const height = INIT_HEIGHT * (1 + (100 - this.scale)/100) console.log(width) console.log(height) return { width: `${width}px`, height: `${height}px`, transform: `scale(${this.scale/100})` } } } } </script>Copy the code

ZoomStye is a calculated property, which is used to add a width and height to the outer layer. I also set a zoom comparison to zoom in and out of the page, as described below. Operation effect:

Next, we need to listen for mouse drags to trigger the scrollbar effect. Since dom manipulation is required, we wrap the drag-handling logic in a VUE directive, so that we can use this directive later.

Note: If you need to manipulate the DOM multiple times in vUE, it is best to encapsulate it in instructions.

The instruction code is as follows:

import Vue from 'vue' Vue.directive('dragscroll', function (el) { el.onmousedown = function (ev) { console.log(el) const disX = ev.clientX const disY = ev.clientY const originalScrollLeft = el.scrollLeft const originalScrollTop = el.scrollTop const originalScrollBehavior = Style ['scroll-behavior'] const originalPointerEvents = el.style['pointer-events'] // auto: Default value, indicating that the scroll box is immediately rolled to a specified position. Style ['cursor'] = 'auto' el. Style ['cursor'] = 'grabbing' Document.onmousemove = function (ev) {ev.preventDefault() // Calculate the drag offset const distanceX = ev.clientX - disX const distanceY = ev.clientY - disY el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY) console.log(originalScrollLeft - distanceX, El. style[' poin-events '] = 'none' document.body. Style ['cursor'] = originalScrollTop-distancey 'grabbing' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null el.style['scroll-behavior'] = originalScrollBehavior el.style['pointer-events'] = originalPointerEvents el.style['cursor'] = 'grab' } } })Copy the code

The main idea here is to use el.scrollTo to trigger the scroll bar move to.

With the Dragscroll directive, let’s use it. First we need to add an outer layer:

<div v-dragscroll class="vue-drag-scroll-out-wrapper"> <div class="vue-drag-scroll-wrapper" :style="zoomStye"> // </div> </div> <style scoped>. Vue -drag-scroll-out-wrapper{overflow-x: hidden; width: 100%; height: 100%; cursor: grab; position: absolute; top:0; left: 0; &::-webkit-scrollbar { width: 0 ! Word-wrap: break-word! Important; ">Copy the code

The overflow value should be set to.vue-drag-scroll-out wrapper otherwise it will not scroll.

There you have it:

Increase the zoom

Here, we add a view zoom in and out, so add two buttons:

<div class="tolbox-zoom-wrapper">
  <div class="zoom-inner">
  <span class="iconfont iconsuoxiao"
    :class="{'disabled': scale === 25}" style="font-size:22px"
    @click="handleReduce"
  />
  <span class="iconfont iconfangda"
    :class="{'disabled': scale === 100}"
    @click="handleEnlarge"  
  />
  <div class="scale-text">{{scale}}%</div>
  </div>
</div>
Copy the code

Effect:

The logic of zoom in and zoom out here is by adding and subtracting scales

handleReduce () {
  if (this.scale === 25) return
  this.scale -= 25
},
handleEnlarge () {
  if (this.scale === 100) return
  this.scale += 25
}
Copy the code

The scaling relationship is the code given by the switch:

const INIT_WIDTH = 2208
const INIT_HEIGHT = 1206
const width = INIT_WIDTH * (1 + (100 - this.scale)/100)
const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)
Copy the code

This proportion is determined by myself. For example, if it is reduced to 75%, the height and width of the outermost layer should be increased by 25%, because zooming is the narrowing of the field of vision, and the corresponding distance is widened.

Finally, use CSS’s transform to scale:

transform: `scale(${this.scale/100})`
Copy the code

The end result:

This is just a simple layout, we need to layout according to their own, here is mainly to share some ideas, if you have a good idea, welcome to leave a message to share.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.