Scriptaculous draggable su iOS

Question

Come impostare gli eventi di tocco sulla classe trascinabile, in modo che funzioni su iOS (iPad, iPhone, ecc.)? Ho letto How can I make a jQuery UI 'draggable()' div draggable for touchscreen?, che ha molte opzioni per jQuery, ma non so come applicarlo a Scriptaculous. Qualsiasi aiuto sarebbe apprezzato. Grazie.

Answer 1

Puoi farlo modificando dragdrop.js come menzione here:

In Draggables:

register: function(draggable) { 
    if(this.drags.length == 0) { 
     this.eventMouseUp = this.endDrag.bindAsEventListener(this); 
     this.eventMouseMove = this.updateDrag.bindAsEventListener(this); 
     this.eventKeypress = this.keyPress.bindAsEventListener(this); 


     Event.observe(document, "mouseup", this.eventMouseUp); 
     Event.observe(document, "mousemove", this.eventMouseMove); 
     Event.observe(document, "keypress", this.eventKeypress); 


     Event.observe(document, "touchstart", this.eventKeypress); 
     Event.observe(document, "touchmove", this.eventMouseMove); 
     Event.observe(document, "touchend", this.eventMouseUp); 
    } 
    this.drags.push(draggable); 
    }, 


    unregister: function(draggable) { 
    this.drags = this.drags.reject(function(d) { return d==draggable }); 
    if(this.drags.length == 0) { 
     Event.stopObserving(document, "touchstart", this.eventKeypress); 
     Event.stopObserving(document, "touchmove", this.eventMouseMove); 
     Event.stopObserving(document, "touchend", this.eventMouseUp); 


     Event.stopObserving(document, "mouseup", this.eventMouseUp); 
     Event.stopObserving(document, "mousemove", this.eventMouseMove); 
     Event.stopObserving(document, "keypress", this.eventKeypress); 
    } 
    }, 

In Draggable:

initialize: 
... 
    this.eventMouseDown = this.initDrag.bindAsEventListener(this); 
    Event.observe(this.handle, "mousedown", this.eventMouseDown); 
     Event.observe(this.handle, "touchstart", this.eventMouseDown); 


    Draggables.register(this); 
    }, 


    destroy: function() { 
    Event.stopObserving(this.handle, "mousedown", this.eventMouseDown); 
    Event.stopObserving(this.handle, "touchstart", this.eventMouseDown); 
    Draggables.unregister(this); 
    }, 

... 

initDrag: function(event) { 
    if(!Object.isUndefined(Draggable._dragging[this.element]) && 
     Draggable._dragging[this.element]) return; 
    if(Event.isLeftClick(event) || event.type == "touchstart") { 

Insieme con editing prototype.js:

function pointerX(event) { 
    var docElement = document.documentElement, 
    body = document.body || { scrollLeft: 0 }; 


    if (event.changedTouches) return (event.changedTouches[0].clientX + 
     (docElement.scrollLeft || body.scrollLeft) - 
     (docElement.clientLeft || 0)); 


    return event.pageX || (event.clientX + 
     (docElement.scrollLeft || body.scrollLeft) - 
     (docElement.clientLeft || 0)); 
    } 


    function pointerY(event) { 
    var docElement = document.documentElement, 
    body = document.body || { scrollTop: 0 }; 


    if (event.changedTouches) return (event.changedTouches[0].clientY + 
     (docElement.scrollTop || body.scrollTop) - 
     (docElement.clientTop || 0)); 


    return event.pageY || (event.clientY + 
     (docElement.scrollTop || body.scrollTop) - 
     (docElement.clientTop || 0)); 
    } 

Answer 2

Penso che tu debba usare la funzione parseInt per le coordinate X, Y, perché ho qualche problema con il browser Chrome su Android: mette qualcosa come il 23.45435435345345345345345 sulle coordinate.

//Add parseInt ----------------[start] 
if (event.changedTouches) return (parseInt(event.changedTouches[0].clientY + 
     (docElement.scrollTop || body.scrollTop) - 
     (docElement.clientTop || 0),10)); 
//Add parseInt ----------------[end]