Question

如何为可拖动的课程设置触摸事件，以便它可以在iOS（iPad，iPhone等）上运行？我读过How can I make a jQuery UI 'draggable()' div draggable for touchscreen?，它有很多jQuery的选项，但不知道如何将它应用于Scriptaculous。任何帮助，将不胜感激。感谢。

Answer 1

你可以通过编辑dragdrop.js来提及here：

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

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

编辑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

我想，你必须对X，Y坐标使用parseInt函数，因为我在Android上的Chrome浏览器有一些问题 - 它把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]

iOS上的Scriptaculous draggable

2 个答案: