2013-06-26 4 views
5

터치 이벤트를 드래그 가능한 클래스로 설정하면 iOS (iPad, iPhone 등)에서 어떻게 작동합니까? 나는 How can I make a jQuery UI 'draggable()' div draggable for touchscreen?을 읽었는데, jQuery에 대한 옵션이 많이 있지만, Scriptaculous에 어떻게 적용해야할지 모르겠습니다. 어떤 도움을 주시면 감사하겠습니다. 감사. Draggables에서iOS에서 드래그 가능한 Scriptaculous

: 드래그 가능한에서

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

: 편집 prototype.js에와 함께

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") { 

:

답변

5

당신은 언급 here으로 편집 dragdrop.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)); 
    } 
+0

최대 득표를해야합니다. 죄송 합니다만, 만약 당신이 원한다면, 직접적으로 메소드를 조작하는 것이 좋지만, 핵심 기능을 편집하는 것으로 간주되지는 않겠습니까? 내가 결정하도록 도울 수 있다면 다른 앱에서 프로토 타입으로 전환 할 수도 있고 그 앱이 다른 앱에서 이야기 할 수있는 유일한 장소이기도합니다. 잘 작동해야 소용돌이 치며 중앙 별까지 얼마나 높이 올라갈 수 있는지보십시오. :-) – blamb

0

Android 용 Chrome 브라우저에 문제가 있기 때문에 X, Y 좌표에 parseInt 함수를 사용해야한다고 생각합니다. 좌표에 23.45435435345345345345345와 같은 값을 넣었습니다.

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