forked from bitovi/jquerypp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdrop.html
More file actions
233 lines (203 loc) · 57 KB
/
drop.html
File metadata and controls
233 lines (203 loc) · 57 KB
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html> <html> <head> <title>drop.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="jquerypp.html"> jquerypp.js </a> <a class="source" href="animate.html"> animate.js </a> <a class="source" href="compare.html"> compare.js </a> <a class="source" href="cookie.html"> cookie.js </a> <a class="source" href="dimensions.html"> dimensions.js </a> <a class="source" href="form_params.html"> form_params.js </a> <a class="source" href="range.html"> range.js </a> <a class="source" href="selection.html"> selection.js </a> <a class="source" href="styles.html"> styles.js </a> <a class="source" href="within.html"> within.js </a> <a class="source" href="default.html"> default.js </a> <a class="source" href="destroyed.html"> destroyed.js </a> <a class="source" href="drag.html"> drag.js </a> <a class="source" href="core.html"> core.js </a> <a class="source" href="limit.html"> limit.js </a> <a class="source" href="scroll.html"> scroll.js </a> <a class="source" href="step.html"> step.js </a> <a class="source" href="drop.html"> drop.js </a> <a class="source" href="fastfix.html"> fastfix.js </a> <a class="source" href="hover.html"> hover.js </a> <a class="source" href="key.html"> key.js </a> <a class="source" href="livehack.html"> livehack.js </a> <a class="source" href="pause.html"> pause.js </a> <a class="source" href="resize.html"> resize.js </a> <a class="source" href="reverse.html"> reverse.js </a> <a class="source" href="swipe.html"> swipe.js </a> <a class="source" href="json.html"> json.js </a> <a class="source" href="vector.html"> vector.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> drop.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">event</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">event</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eventNames</span> <span class="o">=</span> <span class="p">[</span>
<span class="s2">"dropover"</span><span class="p">,</span>
<span class="s2">"dropon"</span><span class="p">,</span>
<span class="s2">"dropout"</span><span class="p">,</span>
<span class="s2">"dropinit"</span><span class="p">,</span>
<span class="s2">"dropmove"</span><span class="p">,</span>
<span class="s2">"dropend"</span><span class="p">];</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">callbacks</span><span class="p">,</span> <span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">callbacks</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">element</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>add the elements ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">eventNames</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">special</span><span class="p">[</span><span class="k">this</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">add</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">handleObj</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>add this element to the compiles list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
<span class="nx">current</span> <span class="o">=</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"dropEventCount"</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"dropEventCount"</span><span class="p">,</span> <span class="nx">current</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">.</span><span class="nx">addElement</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">remove</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
<span class="nx">current</span> <span class="o">=</span> <span class="p">(</span><span class="nx">el</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"dropEventCount"</span><span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">el</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"dropEventCount"</span><span class="p">,</span> <span class="nx">current</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o"><=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">.</span><span class="nx">removeElement</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">lowerName</span><span class="o">:</span> <span class="s2">"drop"</span><span class="p">,</span>
<span class="nx">_rootElements</span><span class="o">:</span> <span class="p">[],</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>elements that are listening for drops</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_elements</span><span class="o">:</span> <span class="nx">$</span><span class="p">(),</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>elements that can be dropped on</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">last_active</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">endName</span><span class="o">:</span> <span class="s2">"dropon"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>adds an element as a 'root' element
this element might have events that we need to respond to</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addElement</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>check other elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">el</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">removeElement</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">el</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">sortByDeepestChild</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Use jQuery.compare to compare two elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">compare</span> <span class="o">=</span> <span class="nx">a</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">compare</span><span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">element</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">compare</span> <span class="o">&</span> <span class="mi">16</span> <span class="o">||</span> <span class="nx">compare</span> <span class="o">&</span> <span class="mi">4</span><span class="p">)</span> <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">compare</span> <span class="o">&</span> <span class="mi">8</span> <span class="o">||</span> <span class="nx">compare</span> <span class="o">&</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">isAffected</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">point</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">responder</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">((</span><span class="nx">responder</span><span class="p">.</span><span class="nx">element</span> <span class="o">!=</span> <span class="nx">moveable</span><span class="p">.</span><span class="nx">element</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">responder</span><span class="p">.</span><span class="nx">element</span><span class="p">.</span><span class="nx">within</span><span class="p">(</span><span class="nx">point</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">point</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">responder</span><span class="p">.</span><span class="nx">_cache</span><span class="p">).</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">1</span><span class="p">));</span>
<span class="p">},</span>
<span class="nx">deactivate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">responder</span><span class="p">,</span> <span class="nx">mover</span><span class="p">,</span> <span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">mover</span><span class="p">.</span><span class="nx">out</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">responder</span><span class="p">)</span>
<span class="nx">responder</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lowerName</span> <span class="o">+</span> <span class="s1">'out'</span><span class="p">,</span> <span class="nx">responder</span><span class="p">.</span><span class="nx">element</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">mover</span><span class="p">)</span>
<span class="p">},</span>
<span class="nx">activate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">responder</span><span class="p">,</span> <span class="nx">mover</span><span class="p">,</span> <span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//this is where we should call over</span>
<span class="nx">mover</span><span class="p">.</span><span class="nx">over</span><span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">responder</span><span class="p">)</span>
<span class="nx">responder</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lowerName</span> <span class="o">+</span> <span class="s1">'over'</span><span class="p">,</span> <span class="nx">responder</span><span class="p">.</span><span class="nx">element</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">mover</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">move</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">responder</span><span class="p">,</span> <span class="nx">mover</span><span class="p">,</span> <span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">responder</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lowerName</span> <span class="o">+</span> <span class="s1">'move'</span><span class="p">,</span> <span class="nx">responder</span><span class="p">.</span><span class="nx">element</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">mover</span><span class="p">)</span>
<span class="p">},</span>
<span class="nx">compile</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">drag</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>if we called compile w/o a current drag</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">dragging</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">dragging</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">dragging</span> <span class="o">=</span> <span class="nx">drag</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">last_active</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">drops</span><span class="p">,</span> <span class="nx">selector</span><span class="p">,</span> <span class="nx">dropResponders</span><span class="p">,</span> <span class="nx">newEls</span> <span class="o">=</span> <span class="p">[],</span>
<span class="nx">dragging</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">dragging</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>go to each root element and look for drop elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//for each element</span>
<span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rootElements</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>gets something like {"": ["dropinit"], ".foo" : ["dropover","dropmove"] }</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">drops</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">findBySelector</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">eventNames</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>get drop elements by selector</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="nx">selector</span> <span class="k">in</span> <span class="nx">drops</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dropResponders</span> <span class="o">=</span> <span class="nx">selector</span> <span class="o">?</span> <span class="nx">jQuery</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">el</span><span class="p">)</span> <span class="o">:</span> <span class="p">[</span><span class="nx">el</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>for each drop element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">e</span> <span class="o"><</span> <span class="nx">dropResponders</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">e</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>add the callbacks to the element's Data
there already might be data, so we merge it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">addCallbacks</span><span class="p">(</span><span class="nx">dropResponders</span><span class="p">[</span><span class="nx">e</span><span class="p">],</span> <span class="nx">drops</span><span class="p">[</span><span class="nx">selector</span><span class="p">],</span> <span class="nx">dragging</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">newEls</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">dropResponders</span><span class="p">[</span><span class="nx">e</span><span class="p">])</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>once all callbacks are added, call init on everything ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">newEls</span><span class="p">,</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">dragging</span><span class="p">)</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>adds the drag callbacks object to the element or merges other callbacks ...
returns true or false if the element is new ...
onlyNew lets only new elements add themselves</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addCallbacks</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">callbacks</span><span class="p">,</span> <span class="nx">onlyNew</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">origData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="s2">"_dropData"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">origData</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="s2">"_dropData"</span><span class="p">,</span> <span class="k">new</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">(</span><span class="nx">callbacks</span><span class="p">,</span> <span class="nx">el</span><span class="p">));</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">onlyNew</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">origCbs</span> <span class="o">=</span> <span class="nx">origData</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>merge data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">eventName</span> <span class="k">in</span> <span class="nx">callbacks</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">origCbs</span><span class="p">[</span><span class="nx">eventName</span><span class="p">]</span> <span class="o">=</span> <span class="nx">origCbs</span><span class="p">[</span><span class="nx">eventName</span><span class="p">]</span> <span class="o">?</span> <span class="nx">origCbs</span><span class="p">[</span><span class="nx">eventName</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">callbacks</span><span class="p">[</span><span class="nx">eventName</span><span class="p">])</span> <span class="o">:</span> <span class="nx">callbacks</span><span class="p">[</span><span class="nx">eventName</span><span class="p">];</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>calls init on each element's drags.
if its cancelled it's removed
adds to the current elements ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">newEls</span><span class="p">,</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">drag</span><span class="p">,</span> <span class="nx">dragging</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">drop</span><span class="p">;</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">i</span> <span class="o"><</span> <span class="nx">newEls</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">drop</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="nx">newEls</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="s2">"_dropData"</span><span class="p">);</span>
<span class="nx">drop</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">lowerName</span> <span class="o">+</span> <span class="s1">'init'</span><span class="p">,</span> <span class="nx">newEls</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">drag</span><span class="p">)</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">drop</span><span class="p">.</span><span class="nx">_canceled</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">newEls</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">push</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">,</span> <span class="nx">newEls</span><span class="p">)</span>
<span class="p">},</span>
<span class="nx">show</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">point</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">moveable</span><span class="p">.</span><span class="nx">element</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">respondable</span><span class="p">,</span> <span class="nx">affected</span> <span class="o">=</span> <span class="p">[],</span>
<span class="nx">propagate</span> <span class="o">=</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">j</span><span class="p">,</span> <span class="nx">la</span><span class="p">,</span> <span class="nx">toBeActivated</span><span class="p">,</span> <span class="nx">aff</span><span class="p">,</span> <span class="nx">oldLastActive</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">last_active</span><span class="p">,</span>
<span class="nx">responders</span> <span class="o">=</span> <span class="p">[],</span>
<span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span>
<span class="nx">drag</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>what's still affected ... we can also move element out here</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">while</span> <span class="p">(</span><span class="nx">i</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">drag</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="s2">"_dropData"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">drag</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">isAffected</span><span class="p">(</span><span class="nx">point</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">drag</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">affected</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">drag</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>we should only trigger on lowest children</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">affected</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">sortByDeepestChild</span><span class="p">);</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">stopRespondPropagate</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">propagate</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">toBeActivated</span> <span class="o">=</span> <span class="nx">affected</span><span class="p">.</span><span class="nx">slice</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>all these will be active</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">last_active</span> <span class="o">=</span> <span class="nx">affected</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>deactivate everything in last_active that isn't active</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">oldLastActive</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">la</span> <span class="o">=</span> <span class="nx">oldLastActive</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span>
<span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">while</span> <span class="p">((</span><span class="nx">aff</span> <span class="o">=</span> <span class="nx">toBeActivated</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">la</span> <span class="o">==</span> <span class="nx">aff</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">toBeActivated</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">i</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">aff</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">deactivate</span><span class="p">(</span><span class="nx">la</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">event</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">propagate</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">toBeActivated</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">activate</span><span class="p">(</span><span class="nx">toBeActivated</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">event</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">propagate</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>activate everything in affected that isn't in last_active</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">affected</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="nx">affected</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">event</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">propagate</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">end</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">la</span><span class="p">,</span> <span class="nx">endName</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">lowerName</span> <span class="o">+</span> <span class="s1">'end'</span><span class="p">,</span>
<span class="nx">onEvent</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">endName</span><span class="p">,</span> <span class="nx">event</span><span class="p">),</span>
<span class="nx">dropData</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>call dropon
go through the actives ... if you are over one, call dropped on it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">last_active</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">la</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">last_active</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isAffected</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">vector</span><span class="p">(),</span> <span class="nx">moveable</span><span class="p">,</span> <span class="nx">la</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">la</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">endName</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">la</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">endName</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">onEvent</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">onEvent</span><span class="p">.</span><span class="nx">isPropagationStopped</span><span class="p">())</span> <span class="p">{</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>call dropend</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">r</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">r</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dropData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">[</span><span class="nx">r</span><span class="p">],</span> <span class="s2">"_dropData"</span><span class="p">);</span>
<span class="nx">dropData</span> <span class="o">&&</span> <span class="nx">dropData</span><span class="p">.</span><span class="nx">callHandlers</span><span class="p">(</span><span class="nx">endName</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">event</span><span class="p">,</span> <span class="nx">moveable</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">clear</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_elements</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>remove temporary drop data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">removeData</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s2">"_dropData"</span><span class="p">)</span>
<span class="p">})</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_elements</span> <span class="o">=</span> <span class="nx">$</span><span class="p">();</span>
<span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">dragging</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">Drag</span><span class="p">.</span><span class="nx">responder</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">Drop</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">callHandlers</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">el</span><span class="p">,</span> <span class="nx">ev</span><span class="p">,</span> <span class="nx">drag</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">length</span> <span class="o">=</span> <span class="k">this</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o">?</span> <span class="k">this</span><span class="p">[</span><span class="nx">method</span><span class="p">].</span><span class="nx">length</span> <span class="o">:</span> <span class="mi">0</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">[</span><span class="nx">method</span><span class="p">][</span><span class="nx">i</span><span class="p">].</span><span class="nx">call</span><span class="p">(</span><span class="nx">el</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">element</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">ev</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">drag</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">cache</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_cache</span> <span class="o">=</span> <span class="nx">value</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">?</span> <span class="nx">value</span> <span class="o">:</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">cancel</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_canceled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>