This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

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> <! <div ref="moveDiv" @mouseDown ="mousedownFn($event)" :class="{'handler_ok_bg': confirmSuccess}" class="handler handler_bg"></div> </div> </template>Copy the code

CSS section: Base64 images because of concerns about image sources

<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/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvb S5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iY WRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gP HJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvd XQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xL jAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ie G1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5N DBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vb D0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5N zNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmM jE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//P wMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSw xULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJR U5ErkJggg==") no-repeat center; } .handler_ok_bg{ background: #fff url("data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvb S5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iY WRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gP HJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvd XQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xL jAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ie G1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5N DBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vb D0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzM WNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmM jE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//P wMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+Am AmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEA gMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhI CIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") 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>Copy the code

To achieve slide drag check

Define the parameters

Data () {return {beginClientX:0, mouseMoveStata:false, maxwidth: ", ConfirmWords :' drag slider to verify ', // confirmSuccess:false}}Copy the code

1. In mounted, according to the width of the slider can be dragged to the maximum width and listen for finger touch and leave events

Mounted () {/ / calculate according to the width of slider can drag the maximum width enclosing maxwidth = this. $refs. DragDiv. ClientWidth - this. $refs. MoveDiv. ClientWidth / / Monitored fingers touch events document. GetElementsByTagName (' HTML ') [0]. AddEventListener (" mousemove ", Enclosing mouseMoveFn) / / listening finger leave event document. GetElementsByTagName (' HTML ') [0]. AddEventListener (" mouseup ", enclosing moseUpFn)}Copy the code

2. Write a finger-sliding event and a finger-leaving event

  • Mousemove event

First, determine whether the drag state is triggered, and then calculate the drag distance and module distance, real-time assignment

If (this.mousemovestata){let width = e.cadentx - 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() } },Copy the code
  • Mouseup event

Change the drag state to false and move the slider to where the finger fell

moseUpFn(e) { this.mouseMoveState = ! Const width = e.cadentx -this.beginclientx const width = e.cadentx -this.beginclientx const width = e.cadentx -this.beginclientx const width = e.cadentx -this.beginclientx const width = e.cadentx The assignment document. GetElementsByClassName (' handler ') [0]. Style. Left = 0 + 'px' document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px' } }Copy the code

In the handler block in the HTML section above, we define the mouseDown event (mousedownFn($Event)).

You need to block the browser’s default behavior, such as file selection, and turn on the threshold that triggers the drag state to record how far the finger moves

MousedownFn :function (e) {e.preventDefault && e.preventDefault() // Block text selection and other browser default events this.mousemovestata = true // This.beginclientx = e.clientx // Record the distance the finger moved},Copy the code

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 side of the screen */ mouseMoveStata:false, */ maxwidth: ", /* Maxwidth: ", */ confirmSuccess:false /* confirmSuccess:false /* confirmSuccess */}}, 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() // Block text selection and other browser default events this.mousemovestata = true this.beginClientX = e.clientX } }, $emit('onValidation', $emit('onValidation'), $emit('onValidation'), $emit('onValidation'), $emit('onValidation'), $emit('onValidation'), $emit('onValidation'), $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' }, If (this.mousemovestata){let width = e.cadentx - 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() } }, {this.mousemovestata = false var width = e.cadentx - this.beginclientx if(width<this.maxwidth){ document.getElementsByClassName('handler')[0].style.left = 0 + 'px' document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px' } } } } </script>Copy the code

Finally:

Public number: xiao He growth, The Buddha department more text, are their own once stepped on the pit or is learned

Interested partners welcome to pay attention to me, I am: He young life. Everybody progress duck together