Faites glisser avec mootools sur mobile

Voici ma solution pour faire tourner les événements tactiles de Mootools Drag. Cette méthode ne m'a pas obligé de modifier le fichier mootools plus depuis que j'ai utilisé Class.refactor (Ceci n'est testé que avec Mootools v.1.3.1) – il ne brise pas non plus les événements de clic habituels

Class.refactor(Drag, { attach: function(){ this.handles.addEvent('touchstart', this.bound.start); return this.previous.apply(this, arguments); }, detach: function(){ this.handles.removeEvent('touchstart', this.bound.start); return this.previous.apply(this, arguments); }, start: function(event){ document.body.addEvents({ touchmove: this.bound.check, touchend: this.bound.cancel }); this.previous.apply(this, arguments); }, check: function(event){ if (this.options.preventDefault) event.preventDefault(); var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2))); if (distance > this.options.snap){ this.cancel(); this.document.addEvents({ mousemove: this.bound.drag, mouseup: this.bound.stop }); document.body.addEvents({ touchmove: this.bound.drag, touchend: this.bound.stop }); this.fireEvent('start', [this.element, event]).fireEvent('snap', this.element); } }, cancel: function(event){ document.body.removeEvents({ touchmove: this.bound.check, touchend: this.bound.cancel }); return this.previous.apply(this, arguments); }, stop: function(event){ document.body.removeEvents({ touchmove: this.bound.drag, touchend: this.bound.stop }); return this.previous.apply(this, arguments); } }); 

Je l'ai réparé moi-même. Il est aussi simple que de mapper les événements de la souris pour toucher les événements.

La solution consiste donc à rechercher et à remplacer:

 mousedown -> touchstart mouseup -> touchend mousemove -> touchmove 

Pourriez-vous essayer https://github.com/kamicane/mootools-touch ?