Arrastre con mootools en el móvil

Question

¿Hay alguna manera de hacer que funcione la clase mootools "Arrastrar" en safari mobile? No me vincules a otros marcos.

Answer 1

¿Podría intentar https://github.com/kamicane/mootools-touch?

Answer 2

Lo he solucionado yo mismo. Es tan fácil como hacer los eventos del mouse para tocar eventos.

Así que la solución es buscar & reemplazar:

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

Answer 3

Aquí fue mi solución para hacer eventos de apoyo al tacto Mootools Arrastre. Este método no requiere de mí para editar los mootools más archivos que no uso Class.refactor (Esto sólo se prueba con Mootools v.1.3.1) - sino que también no se rompe los habituales eventos de clic

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); 
     } 
    });