आईओएस पर स्क्रिप्टैकियस ड्रैगगेबल

Question

आप ड्रैगगेबल क्लास में टच इवेंट कैसे सेट अप करेंगे, ताकि यह आईओएस (आईपैड, आईफोन, इत्यादि) पर काम करे? मैंने How can I make a jQuery UI 'draggable()' div draggable for touchscreen? पढ़ा है, जिसमें jQuery के लिए बहुत सारे विकल्प हैं, लेकिन यह सुनिश्चित नहीं है कि इसे स्क्रिप्टैकुलस पर कैसे लागू किया जाए। किसी भी सहायता की सराहना की जाएगी। धन्यवाद।

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

खींचने योग्य में:

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

संपादन prototype.js के साथ साथ:

Answer 1

आप उल्लेख 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)); 
    } 

Answer 2

मुझे लगता है कि आपको एक्स, वाई निर्देशांक के लिए 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]