iPadDraggable/iPadDraggable.js at master · vksvicky/iPadDraggable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*
 * iPad Draggable
 * --------------
 * Maps touch events to mouse events for jQuery UI Draggable elements.
 *
 * Based on code samples from:
 * http://vetruvet.blogspot.com/2010/12/converting-single-touch-events-to-mouse.html
 *
 * Dependencies:
 *   - jQuery
 *   - jQuery UI
 *
 */

(function($) {

  if (!$) {
    console.log( 'jQuery required.');
    return;
  }

  var IPadDraggable = function() {
    var self = this;

    self.init = function() {
      $( ".ui-draggable, .ui-draggable-dragging" )
        .live( 'touchstart',  self.touchHandler, true )
        .live( 'touchmove',   self.touchHandler, true )
        .live( 'touchend',    self.touchHandler, true )
        .live( 'touchcancel', self.touchHandler, true );
    };

    self.touchHandler = function( event ) {
      var touches = event.originalEvent.changedTouches,
          first = touches[0],
          type;

      switch(event.type) {
        case "touchstart":
          type="mousedown";
          break;
        case "touchmove":
          type="mousemove";
          break;
        case "touchend":
          type="mouseup";
          break;
        default:
          return;
      }

      var screenX = first.screenX || first.pageX;
      var screenY = first.screenY || first.pageY;

      var simulatedEvent = document.createEvent("MouseEvent");

      simulatedEvent.initMouseEvent(
          type, true, true, window, 1,
          screenX, screenY,
          first.clientX, first.clientY, false,
          false, false, false, 0, null);

      first.target.dispatchEvent(simulatedEvent);
      event.preventDefault();
    };

    self.init();

    return self;
  };

  $(function() {
    var iPadDraggable = new IPadDraggable();
  });

}(jQuery));