Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Vue to achieve a simple mouse drag and scroll effect plug-in, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Demo case

Recently, I am working on a new project, and there is a need for this:

To describe it briefly, if you drag the page with the mouse, the whole page will move with the drag of the mouse. If the page has content, it needs to move to the outer layer of the drag as a whole.

At first, I didn't have any ideas, so I posted a moments, and I got a lot of answers, mainly dragging and so on, but this dragging is just the drag of a single element, the drag of the whole view I want.

The clue here is cut off again.

So go back to the page where Flying Book has a similar function, and then carefully examine the DOM structure of its page, as shown below:

Found that there is this layer, it sets the page very wide, very high, in order to hide the scroll bar, so set overflow: hidden;, to see this setting, suddenly a flash, it is using drag and drop to trigger the scroll bar, in careful thinking, wow, this idea is feasible, NB.

Ready to try it.

To create a vue project, I won't go into details. I have published the original code on github. I am interested to see for myself:

Https://github.com/qq449245884/vue-drag-scroll

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

/ / some less important codes export default {name: 'VueDragScroll', props: {msg: String}, data () {return {scale: 100}} are omitted here 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}) `}

Here set a calculation property zoomStye, the main use is to add a width, and height in the outer layer, here I also set a zoom comparison, in order to zoom in and out of the page, the following. Running effect:

Next, we need to monitor the mouse drag to trigger the scroll bar effect, because we need to operate on dom, so here we encapsulate the drag processing logic with the vue instruction, so that if necessary later, as long as we use the instruction.

Note: if you need to operate on dom multiple times in vue, it is best to encapsulate it in an instruction.

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 = el.style ['scroll-behavior'] const originalPointerEvents = el.style [' pointer-events'] / / auto: default value, indicating that the scroll box immediately scrolls to the specified position. El.style ['scroll-behavior'] =' auto' el.style ['cursor'] =' grabbing' / / the mouse movement event is the entire document that is monitored This enables the mouse to drag _ document.onmousemove = function (ev) {ev.preventDefault () / / calculate the drag offset distance const distanceX = ev.clientX-disX const distanceY = ev.clientY-disY el.scrollTo (originalScrollLeft-distanceX, originalScrollTop-distanceY) console.log (originalScrollLeft-distanceX) when the mouse moves outside the element. OriginalScrollTop-distanceY) / / because our picture itself has a click effect So you need to block out the click event el.style ['pointer-events'] =' none' document.body.style ['cursor'] =' grabbing'} _ document.onmouseup = function () {_ document.onmousemove = null _ document.onmouseup = null el.style ['scroll-behavior'] = originalScrollBehavior el.style [' pointer-events'] = originalPointerEvents when the mouse is dragged El.style ['cursor'] =' grab'})

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

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

/ / omit some less important codes here. Vue-drag-scroll-out-wrapper {overflow-x: hidden; width: 100%; height: 100%; cursor: grab; position: absolute; top:0; left: 0; &::-webkit-scrollbar {width: 0! important} / / hide the vertical scroll bar}

/ / omit some less important code here to note that the overflow value should be set in .vue-drag-scroll-out-wrapper, otherwise it cannot be scrolled (tested).

In this way, the drag effect comes out:

Add Zoom

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

{{scale}}%

Effect:

The logic of zooming in and out here is achieved by adding or decreasing scale.

HandleReduce () {if (this.scale = 25) return this.scale-= 25}, handleEnlarge () {if (this.scale = 25) return this.scale + = 25}

The relationship between the scaling ratio is the code given by the switch:

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

I set this ratio myself, for example, if it is now reduced to 75%, then the height and width of the outermost layer should be increased by 25%, because zooming is the reduction of the field of view, and the corresponding distance is widening.

Finally, use CSS's transform to zoom:

Transform: `scale (${this.scale/100}) `

The final effect:

Thank you for reading this article carefully. I hope the article "how to use Vue to achieve a simple mouse drag and scrolling plug-in" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.