Vue realizes the whole process of slider drag verification function

Vue realizes the whole process of slider drag verification function

Rendering

Define the skeleton, write HTML and CSS

HTML part

<template>
    <div class="drag-wrapper" ref="dragDiv">
        <div class="drag_bg"></div>
        <div class="drag_text f14">{{ confirmWords }}</div>
        <!-- Moved Modules -->
        <div ref="moveDiv"
             @mousedown="mousedownFn($event)"
             :class="{'handler_ok_bg': confirmSuccess}"
             class="handler handler_bg"></div>
    </div>
</template>

CSS part: Because of concerns about the image source, it is written as a base64 image

<style scoped>
    .drag{
        position: relative;
        background-color: #e8e8e8;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .handler{
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        cursor: move;
        position: absolute;top: 0px;left: 0px;
    }
    .handler_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
    }
    .handler_ok_bg{
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
    }
    .drag_bg{
        background-color: #7ac23c;
        height: 40px;
        width: 0px;
    }
    .drag_text{
        position: absolute;
        top: 0px;
        width: 100%;text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select:none;
        -ms-user-select:none;
    }
</style>

Implement sliding and dragging verification

Defining parameters

data() {
    return {
        beginClientX:0, // Distance from the left end of the screenmouseMoveStata:false, // Trigger drag status judgmentmaxwidth:'', // Maximum drag width, calculated based on the slider widthconfirmWords:'Drag slider verification', // Slider textconfirmSuccess:false // Verification success judgment}
}

1. In mounted, calculate the maximum draggable width based on the slider width and listen for finger touch and leave events

mounted() {
    // Calculate the maximum draggable width based on the slider width this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    // Listen for finger touch events document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)
    // Listen for finger leaving events document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)
}

2. Write events for finger sliding and finger leaving

Mousemove Event

First determine whether the drag state is triggered, then calculate the drag distance and module distance, and assign values ​​in real time

//Verify success function mouseMoveFn(e){
    if(this.mouseMoveStata){
        let width = e.clientX - this.beginClientX
        if(width > 0 && width <= this.maxwidth) {
            document.getElementsByClassName('handler')[0].style.left = width + 'px'
            document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
        }else if(width > this.maxwidth) this.successFunction()
    }
},

Mouseup Event

Change the drag state to false and move the slider to the corresponding finger drop position

moseUpFn(e) {
    this.mouseMoveState = !1 // Modify state const width = e.clientX - this.beginClientX // Calculate and get width if (width < this.maxwidth) { // When the width is less than the width of the module, assign a value document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
    }
}

In the handler block of the HTML section above, the mousedown event is defined (mousedownFn($event))

It is necessary to prevent the default browser behavior such as file selection, turn on the threshold for triggering the drag state, and record the distance the finger moves

mousedownFn:function (e) {
    e.preventDefault && e.preventDefault() // Prevent default browser events such as text selection this.mouseMoveStata = true // Open the threshold for triggering the drag state this.beginClientX = e.clientX // Record the distance the finger moves},

At this point, the function is complete. .

The complete JS code is as follows

<script>
    export default {
        data(){
            return {
                beginClientX:0, /*Distance from the left end of the screen*/
                mouseMoveStata:false, /*Trigger drag status judgment*/
                maxwidth:'', /*Maximum drag width, calculated based on the slider width*/
                confirmWords:'Drag the slider to verify', /*slider text*/
                confirmSuccess:false /*Verification success judgment*/
            }
        },
        mounted(){
            this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
            document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn)
            document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
        },
        methods: {
            mousedownFn:function (e) {
                if(!this.confirmSuccess){
                    e.preventDefault && e.preventDefault() //Prevent text selection and other browser default events this.mouseMoveStata = true
                    this.beginClientX = e.clientX
                }
            },
            //mousedoen event successFunction(){
                this.confirmSuccess = true
                this.confirmWords = 'Verification passed'
                this.$emit('onValidation', true)
                if(window.addEventListener){
                    document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn)
                    document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn)
                }else document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{})
                document.getElementsByClassName('drag_text')[0].style.color = '#fff'
                document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'
                document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'
            },
            //Verify success function mouseMoveFn(e){
                if(this.mouseMoveStata){
                    let width = e.clientX - this.beginClientX
                    if(width > 0 && width <= this.maxwidth) {
                        document.getElementsByClassName('handler')[0].style.left = width + 'px'
                        document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'
                    }else if(width > this.maxwidth) this.successFunction()
                }
            },
            //mousemove event moseUpFn(e){
                this.mouseMoveStata = false
                var width = e.clientX - this.beginClientX
                if(width<this.maxwidth){
                    document.getElementsByClassName('handler')[0].style.left = 0 + 'px'
                    document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
                }
            }
        }
    }
</script>

Summarize

This is the end of this article about Vue's implementation of the slider drag verification function. For more relevant Vue slider drag verification content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue module drag and drop implementation example code
  • Use konva and vue-konva libraries to implement drag slider verification function

<<:  Detailed explanation of the use of Linux seq command

>>:  Two methods of MySql comma concatenation string query

Recommend

Specific use of MySQL internal temporary tables

Table of contents UNION Table initialization Exec...

Jmeter connects to the database process diagram

1. Download the MySQL jdbc driver (mysql-connecto...

Vue implements a complete process record of a single file component

Table of contents Preface Single file components ...

Vue realizes the card flip effect

This article example shares the specific code of ...

WML tag summary

Structure related tags ---------------------------...

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

Detailed steps for IDEA to integrate docker to achieve remote deployment

1. Enable remote access to the docker server Log ...

Summary of Common Commands for Getting Started with MySQL Database Basics

This article uses examples to describe the common...

Detailed explanation of the principle and usage of MySQL views

This article uses examples to illustrate the prin...

MySQL full-text search Chinese solution and example code

MySQL full text search Chinese solution Recently,...

MYSQL local installation and problem solving

Preface This article is quite detailed and even a...

React gets input value and submits 2 methods examples

Method 1: Use the target event attribute of the E...

A set of code based on Vue-cli supports multiple projects

Table of contents Application Scenario Ideas Proj...

In-depth explanation of MySQL stored procedures (in, out, inout)

1. Introduction It has been supported since versi...

Css3 realizes seamless scrolling and anti-shake

question The seamless scrolling of pictures and t...