おもしろいスライダ検証


Document
// const PositionMove = function () { let id = 0; class PositionMove { constructor({ el, direction = 'right' }) { this.id = ++id; this.el = el; this.elWidth = el.offsetWidth; const parent = el.parentNode; this.parent = parent; this.parentOffsetLeftWithClient = parent.getBoundingClientRect().left; // this.isToggleTouchend = false; this.done = false; this.start = 0; this.end = parent.offsetWidth - this.elWidth; this.init(); } init() { this.isOnMove = false; // Object.assign(this, { touchstart: this.touchstart.bind(this), touchend: this.touchend.bind(this), touchmove: this.touchmove.bind(this), }); this.bindEvents(); } destory() { this.unbindEvents(); Object.keys(this).forEach(k => { delete this[k]; }); console.log(this); } bindEvents() { this.parent.addEventListener('mousedown', this.touchstart); this.parent.addEventListener('mouseup', this.touchend); this.parent.addEventListener('mouseleave', this.touchend); this.parent.addEventListener('mousemove', this.touchmove, { passive: true }); } unbindEvents() { this.parent.removeEventListener('mousedown', this.touchstart); this.parent.removeEventListener('mouseup', this.touchend); this.parent.removeEventListener('mouseleave', this.touchend); this.parent.removeEventListener('mousemove', this.touchmove, { passive: true }); } touchstart() { this.isOnMove = true; this.isToggleTouchend = false; } touchend(evt) { // fix if (evt.type === 'mouseleave' && !this.isOnMove) return; if (this.isToggleTouchend) return; this.isToggleTouchend = true; this.isOnMove = false; if (!this.done) { this.el.style.left = '0'; } else { this.el.style.left = (this.start = this.end) + 'px'; } this.notify(); } touchmove(evt) { if (!this.isOnMove) return; this.start = evt.clientX - this.parentOffsetLeftWithClient; this.el.style.left = this.start + 'px'; if (this.start >= this.end) { this.done = true; this.touchend(evt); this.destory(); return; } // , touchend this.notify(); } notify() { this.onchange && this.onchange({ start: this.start, end: this.end, }); if (!this.isOnMove) { if (this.done) { this.onsuccess && this.onsuccess(); } else { this.oncancel && this.oncancel(); } } } // interface // @{function} onchange }; return PositionMove; }(); class DragValidate { getEl(el) { el = document.querySelector(el); // fix el el.style.position = 'relative'; el.style.height = '100%'; el.style.userSelect = 'none'; return el; } constructor({ el: selector, ...options }) { /** el , wrapper , clientWidth、scrollWidth */ const el = this.el = this.getEl(selector); if (!this.el) throw (' '); // this.width = el.offsetWidth; this.height = el.offsetHeight; if (this.width === 0 || !this.height === 0) return console.log(' '); this.init(); } init() { this.hand = this.createHand(); this.hand.onchange = function ({ start, end }) { console.log(start / end, '%'); } this.hand.onsuccess = function () { console.log(' '); } this.hand.oncancel = function () { console.log(' '); } } createHand() { // dom, const block = document.createElement('div'); block.style.cssText = ` position:absolute; left:0; top:0; bottom:0; width:${this.height}px; background-color:blue;`; this.el.appendChild(block); const action = new PositionMove({ el: block, }); return action; } } const test = new DragValidate({ el: '#test', });