Jqueryのドラッグアンドドロップにタッチイベントをつけてスマホ対応にしたい。

ドラッグアンドドロップのタッチイベントの実装の方法

高校生です。学校の課題研究で英単語パズルアプリを作ることになり、monacaというプラットフォームでHTMLとCSS、Javascriptを使って毎日試行錯誤しています。
アプリの内容としては、ランダムに並び替えられた英文字を揃えると正解と表示。次へ進んでいく、といった感じです。
そこで、パズル部分のjQueryのよさそうなものを海外のサイトで見つけたのでそれをベースにプログラムを組みたいのですが、そのプログラムはPCのドラッグアンドドロップでのみ機能して、スマホのタッチイベントに対応していないので、アプリとして利用できません。
なので、どなたかにこのプログラムにタッチイベントをつけてスマホでも機能する方法を教えていただきたいです。

参考にしたサイト

リンク内容

該当のソースコード

jquery
1コード
2var correctCards = 0;
3$( init );
4
5function init() {
6
7  // Hide the success message
8  $('#successMessage').hide();
9  $('#successMessage').css( {
10    left: '580px',
11    top: '250px',
12    width: 0,
13    height: 0
14  } );
15
16  // Reset the game
17  correctCards = 0;
18  $('#cardPile').html( '' );
19  $('#cardSlots').html( '' );
20
21  // Create the pile of shuffled cards
22  var numbers = [ 1, 2, 3, 4, 5 ];
23  numbers.sort( function() { return Math.random() - .5 } );
24
25  for ( var i=0; i<5; i++ ) {
26    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
27      containment: '#content',
28      stack: '#cardPile div',
29      cursor: 'move',
30      revert: true
31    } );
32  }
33
34  // Create the card slots
35  var words = [ 'one', 'two', 'three', 'four', 'five' ];
36  for ( var i=1; i<=5; i++ ) {
37    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
38      accept: '#cardPile div',
39      hoverClass: 'hovered',
40      drop: handleCardDrop
41    } );
42  }
43
44}
45
46function handleCardDrop( event, ui ) {
47  var slotNumber = $(this).data( 'number' );
48  var cardNumber = ui.draggable.data( 'number' );
49
50  // If the card was dropped to the correct slot,
51  // change the card colour, position it directly
52  // on top of the slot, and prevent it being dragged
53  // again
54
55  if ( slotNumber == cardNumber ) {
56    ui.draggable.addClass( 'correct' );
57    ui.draggable.draggable( 'disable' );
58    $(this).droppable( 'disable' );
59    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
60    ui.draggable.draggable( 'option', 'revert', false );
61    correctCards++;
62  } 
63  
64  // If all the cards have been placed correctly then display a message
65  // and reset the cards for another go
66
67  if ( correctCards == 5 ) {
68    $('#successMessage').show();
69    $('#successMessage').animate( {
70      left: '380px',
71      top: '200px',
72      width: '400px',
73      height: '100px',
74      opacity: 1
75    } );
76  }
77
78}

html
1コード
2<!doctype html>
3<html lang="en">
4<head>
5
6<title>A jQuery Drag-and-Drop Number Cards Game</title>
7<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
8<link rel="stylesheet" type="text/css" href="style.css">
9
10<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
11<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
12<body>
13
14<div id="content">
15
16  <div id="cardPile"> </div>
17  <div id="cardSlots"> </div>
18
19  <div id="successMessage">
20    <h2>GO TO</h2>
21    <button onclick="init()">Play Again</button>
22  </div>
23
24</div>
25
26
27
28</body>
29</html>

css
1コード
2/**/
3/* Add some margin to the page and set a default font and colour */
4
5body {
6  margin: 30px;
7  font-family: 'Georgia', serif;
8  line-height: 1.8em;
9  color: #333;
10}
11
12/* Give headings their own font */
13
14h1,
15h2,
16h3,
17h4 {
18  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
19}
20
21/* Main content area */
22
23#content {
24  margin: 80px 70px;
25  text-align: center;
26  -moz-user-select: none;
27  -webkit-user-select: none;
28  user-select: none;
29}
30
31/* Header/footer boxes */
32
33.wideBox {
34  clear: both;
35  text-align: center;
36  margin: 70px;
37  padding: 10px;
38  background: #ebedf2;
39  border: 1px solid #333;
40}
41
42.wideBox h1 {
43  font-weight: bold;
44  margin: 20px;
45  color: #666;
46  font-size: 1.5em;
47}
48
49/* Slots for final card positions */
50
51#cardSlots {
52  margin: 50px auto 0 auto;
53  background: #ddf;
54}
55
56/* The initial pile of unsorted cards */
57
58#cardPile {
59  margin: 0 auto;
60  background: #ffd;
61}
62
63#cardSlots,
64#cardPile {
65  width: 610px;
66  height: 120px;
67  padding: 20px;
68  border: 2px solid #333;
69  -moz-border-radius: 10px;
70  -webkit-border-radius: 10px;
71  border-radius: 10px;
72  -moz-box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8);
73  -webkit-box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8);
74  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.8);
75}
76
77/* Individual cards and slots */
78
79#cardSlots div,
80#cardPile div {
81  float: left;
82  width: 58px;
83  height: 78px;
84  padding: 10px;
85  padding-top: 40px;
86  padding-bottom: 0;
87  border: 2px solid #333;
88  -moz-border-radius: 10px;
89  -webkit-border-radius: 10px;
90  border-radius: 10px;
91  margin: 0 0 0 10px;
92  background: #fff;
93}
94
95#cardSlots div:first-child,
96#cardPile div:first-child {
97  margin-left: 0;
98}
99
100#cardSlots div.hovered {
101  background: #aaa;
102}
103
104#cardSlots div {
105  border-style: dashed;
106}
107
108#cardPile div {
109  background: #666;
110  color: #fff;
111  font-size: 50px;
112  text-shadow: 0 0 3px #000;
113}
114
115#cardPile div.ui-draggable-dragging {
116  -moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
117  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
118  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
119}
120
121/* Individually coloured cards */
122
123#card1.correct {
124  background: red;
125}
126#card2.correct {
127  background: brown;
128}
129#card3.correct {
130  background: orange;
131}
132#card4.correct {
133  background: yellow;
134}
135#card5.correct {
136  background: green;
137}
138
139/* "You did it!" message */
140#successMessage {
141  position: absolute;
142  left: 580px;
143  top: 250px;
144  width: 0;
145  height: 0;
146  z-index: 100;
147  background: #dfd;
148  border: 2px solid #333;
149  -moz-border-radius: 10px;
150  -webkit-border-radius: 10px;
151  border-radius: 10px;
152  -moz-box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.8);
153  -webkit-box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.8);
154  box-shadow: 0.3em 0.3em 0.5em rgba(0, 0, 0, 0.8);
155  padding: 20px;
156}
157
158