1 | /*
|
---|
2 | * draggable_options.js
|
---|
3 | */
|
---|
4 | (function($) {
|
---|
5 |
|
---|
6 | function testScroll(position) {
|
---|
7 | $("#main").css('position', position);
|
---|
8 | drag(el, 50, 50);
|
---|
9 | moved(50, 50, position+' parent');
|
---|
10 | }
|
---|
11 |
|
---|
12 | function setScroll(what) {
|
---|
13 | if(what) {
|
---|
14 | $(document).scrollTop(100); $(document).scrollLeft(100);
|
---|
15 | } else {
|
---|
16 | $("#main")[0].scrollTop = 100; $("#main")[0].scrollLeft = 100;
|
---|
17 | }
|
---|
18 | }
|
---|
19 |
|
---|
20 | var border = function(el, side) { return parseInt(el.css('border-' + side + '-width')); }
|
---|
21 |
|
---|
22 | var margin = function(el, side) { return parseInt(el.css('margin-' + side)); }
|
---|
23 |
|
---|
24 | module("draggable: options");
|
---|
25 |
|
---|
26 | test("{ addClasses: true }, default", function() {
|
---|
27 | equals(draggable_defaults.addClasses, true);
|
---|
28 |
|
---|
29 | el = $("<div></div>").draggable({ addClasses: true });
|
---|
30 | ok(el.is(".ui-draggable"), "'ui-draggable' class added");
|
---|
31 |
|
---|
32 | el.draggable("destroy");
|
---|
33 | });
|
---|
34 |
|
---|
35 | test("{ addClasses: false }", function() {
|
---|
36 | el = $("<div></div>").draggable({ addClasses: false });
|
---|
37 | ok(!el.is(".ui-draggable"), "'ui-draggable' class not added");
|
---|
38 |
|
---|
39 | el.draggable("destroy");
|
---|
40 | });
|
---|
41 |
|
---|
42 | test("{ appendTo: 'parent' }, default", function() {
|
---|
43 | equals(draggable_defaults.appendTo, "parent");
|
---|
44 |
|
---|
45 | ok(false, 'missing test - untested code is broken code');
|
---|
46 | });
|
---|
47 |
|
---|
48 | test("{ appendTo: Element }", function() {
|
---|
49 | ok(false, 'missing test - untested code is broken code');
|
---|
50 | });
|
---|
51 |
|
---|
52 | test("{ appendTo: Selector }", function() {
|
---|
53 | ok(false, 'missing test - untested code is broken code');
|
---|
54 | });
|
---|
55 |
|
---|
56 | test("{ axis: false }, default", function() {
|
---|
57 | equals(draggable_defaults.axis, false);
|
---|
58 |
|
---|
59 | el = $("#draggable2").draggable({ axis: false });
|
---|
60 | drag(el, 50, 50);
|
---|
61 | moved(50, 50);
|
---|
62 | });
|
---|
63 |
|
---|
64 | test("{ axis: 'x' }", function() {
|
---|
65 | el = $("#draggable2").draggable({ axis: "x" });
|
---|
66 | drag(el, 50, 50);
|
---|
67 | moved(50, 0);
|
---|
68 | });
|
---|
69 |
|
---|
70 | test("{ axis: 'y' }", function() {
|
---|
71 | el = $("#draggable2").draggable({ axis: "y" });
|
---|
72 | drag(el, 50, 50);
|
---|
73 | moved(0, 50);
|
---|
74 | });
|
---|
75 |
|
---|
76 | test("{ axis: ? }, unexpected", function() {
|
---|
77 | var unexpected = {
|
---|
78 | "true": true,
|
---|
79 | "{}": {},
|
---|
80 | "[]": [],
|
---|
81 | "null": null,
|
---|
82 | "undefined": undefined,
|
---|
83 | "function() {}": function() {}
|
---|
84 | };
|
---|
85 | $.each(unexpected, function(key, val) {
|
---|
86 | el = $("#draggable2").draggable({ axis: val });
|
---|
87 | drag(el, 50, 50);
|
---|
88 | moved(50, 50, "axis: " + key);
|
---|
89 | el.draggable("destroy");
|
---|
90 | })
|
---|
91 | });
|
---|
92 |
|
---|
93 | test("{ cancel: ':input,option' }, default", function() {
|
---|
94 | equals(draggable_defaults.cancel, ":input,option");
|
---|
95 |
|
---|
96 | $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main');
|
---|
97 |
|
---|
98 | el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
|
---|
99 | drag("#draggable-option-cancel-default", 50, 50);
|
---|
100 | moved(50, 50);
|
---|
101 |
|
---|
102 | el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
|
---|
103 | drag("#draggable-option-cancel-default :input", 50, 50);
|
---|
104 | moved(0, 0);
|
---|
105 |
|
---|
106 | el.draggable("destroy");
|
---|
107 | });
|
---|
108 |
|
---|
109 | test("{ cancel: 'span' }", function() {
|
---|
110 | el = $("#draggable2").draggable();
|
---|
111 | drag("#draggable2 span", 50, 50);
|
---|
112 | moved(50, 50);
|
---|
113 |
|
---|
114 | el.draggable("destroy");
|
---|
115 |
|
---|
116 | el = $("#draggable2").draggable({ cancel: 'span' });
|
---|
117 | drag("#draggable2 span", 50, 50);
|
---|
118 | moved(0, 0);
|
---|
119 | });
|
---|
120 |
|
---|
121 | test("{ cancel: ? }, unexpected", function() {
|
---|
122 | var unexpected = {
|
---|
123 | "true": true,
|
---|
124 | "false": false,
|
---|
125 | "{}": {},
|
---|
126 | "[]": [],
|
---|
127 | "null": null,
|
---|
128 | "undefined": undefined,
|
---|
129 | "function() {return '';}": function() {return '';},
|
---|
130 | "function() {return true;}": function() {return true;},
|
---|
131 | "function() {return false;}": function() {return false;}
|
---|
132 | };
|
---|
133 | $.each(unexpected, function(key, val) {
|
---|
134 | el = $("#draggable2").draggable({ cancel: val });
|
---|
135 | drag(el, 50, 50);
|
---|
136 | var expected = [50, 50];
|
---|
137 | moved(expected[0], expected[1], "cancel: " + key);
|
---|
138 | el.draggable("destroy");
|
---|
139 | })
|
---|
140 | });
|
---|
141 |
|
---|
142 | test("{ containment: false }, default", function() {
|
---|
143 | equals(draggable_defaults.containment, false);
|
---|
144 |
|
---|
145 | ok(false, 'missing test - untested code is broken code');
|
---|
146 | });
|
---|
147 |
|
---|
148 | test("{ containment: Element }", function() {
|
---|
149 | ok(false, 'missing test - untested code is broken code');
|
---|
150 | });
|
---|
151 |
|
---|
152 | test("{ containment: 'parent' }, relative", function() {
|
---|
153 | el = $("#draggable1").draggable({ containment: 'parent' });
|
---|
154 | var p = el.parent(), po = p.offset();
|
---|
155 | drag(el, -100, -100);
|
---|
156 | var expected = {
|
---|
157 | left: po.left + border(p, 'left') + margin(el, 'left'),
|
---|
158 | top: po.top + border(p, 'top') + margin(el, 'top')
|
---|
159 | }
|
---|
160 | same(offsetAfter, expected, 'compare offset to parent');
|
---|
161 | });
|
---|
162 |
|
---|
163 | test("{ containment: 'parent' }, absolute", function() {
|
---|
164 | el = $("#draggable2").draggable({ containment: 'parent' });
|
---|
165 | var p = el.parent(), po = p.offset();
|
---|
166 | drag(el, -100, -100);
|
---|
167 | var expected = {
|
---|
168 | left: po.left + border(p, 'left') + margin(el, 'left'),
|
---|
169 | top: po.top + border(p, 'top') + margin(el, 'top')
|
---|
170 | }
|
---|
171 | same(offsetAfter, expected, 'compare offset to parent');
|
---|
172 | });
|
---|
173 |
|
---|
174 | test("{ containment: 'document' }", function() {
|
---|
175 | ok(false, 'missing test - untested code is broken code');
|
---|
176 | });
|
---|
177 |
|
---|
178 | test("{ containment: 'window' }", function() {
|
---|
179 | ok(false, 'missing test - untested code is broken code');
|
---|
180 | });
|
---|
181 |
|
---|
182 | test("{ containment: Selector }", function() {
|
---|
183 | ok(false, 'missing test - untested code is broken code');
|
---|
184 | });
|
---|
185 |
|
---|
186 | test("{ cursor: 'auto' }, default", function() {
|
---|
187 | equals(draggable_defaults.cursor, 'auto');
|
---|
188 |
|
---|
189 | function getCursor() { return $("#draggable2").css("cursor"); }
|
---|
190 |
|
---|
191 | expect(3);
|
---|
192 |
|
---|
193 | var expected = "auto", actual, before, after;
|
---|
194 |
|
---|
195 | el = $("#draggable2").draggable({
|
---|
196 | cursor: expected,
|
---|
197 | start: function(event, ui) {
|
---|
198 | actual = getCursor();
|
---|
199 | }
|
---|
200 | });
|
---|
201 |
|
---|
202 | before = getCursor();
|
---|
203 | drag("#draggable2", -1, -1);
|
---|
204 | after = getCursor();
|
---|
205 |
|
---|
206 | equals(actual, expected, "start callback: cursor '" + expected + "'");
|
---|
207 | equals(after, before, "after drag: cursor restored");
|
---|
208 |
|
---|
209 | });
|
---|
210 |
|
---|
211 | test("{ cursor: 'move' }", function() {
|
---|
212 |
|
---|
213 | function getCursor() { return $("body").css("cursor"); }
|
---|
214 |
|
---|
215 | expect(2);
|
---|
216 |
|
---|
217 | var expected = "move", actual, before, after;
|
---|
218 |
|
---|
219 | el = $("#draggable2").draggable({
|
---|
220 | cursor: expected,
|
---|
221 | start: function(event, ui) {
|
---|
222 | actual = getCursor();
|
---|
223 | }
|
---|
224 | });
|
---|
225 |
|
---|
226 | before = getCursor();
|
---|
227 | drag("#draggable2", -1, -1);
|
---|
228 | after = getCursor();
|
---|
229 |
|
---|
230 | equals(actual, expected, "start callback: cursor '" + expected + "'");
|
---|
231 | equals(after, before, "after drag: cursor restored");
|
---|
232 |
|
---|
233 | });
|
---|
234 |
|
---|
235 | test("{ cursorAt: false}, default", function() {
|
---|
236 | equals(draggable_defaults.cursorAt, false);
|
---|
237 |
|
---|
238 | ok(false, 'missing test - untested code is broken code');
|
---|
239 | });
|
---|
240 |
|
---|
241 | test("{ cursorAt: { left: -5, top: -5 } }", function() {
|
---|
242 | expect(4);
|
---|
243 |
|
---|
244 | var deltaX = -3, deltaY = -3,
|
---|
245 | offsetX = 5, offsetY = 5,
|
---|
246 | cursorAtX = -5, cursorAtY = -5;
|
---|
247 |
|
---|
248 | $.each(['relative', 'absolute'], function(i, position) {
|
---|
249 | var el = $('#draggable' + (i + 1)).draggable({
|
---|
250 | cursorAt: { left: cursorAtX, top: cursorAtY },
|
---|
251 | drag: function(event, ui) {
|
---|
252 | equals(ui.offset.left, expected.left, position + ' left');
|
---|
253 | equals(ui.offset.top, expected.top, position + ' top');
|
---|
254 | }
|
---|
255 | }),
|
---|
256 | before = el.offset(),
|
---|
257 | pos = {
|
---|
258 | clientX: before.left + offsetX,
|
---|
259 | clientY: before.top + offsetY
|
---|
260 | },
|
---|
261 | expected = {
|
---|
262 | left: before.left + offsetX - cursorAtX + deltaX,
|
---|
263 | top: before.top + offsetY - cursorAtY + deltaY
|
---|
264 | };
|
---|
265 |
|
---|
266 | el.simulate("mousedown", pos);
|
---|
267 | pos.clientX += deltaX;
|
---|
268 | pos.clientY += deltaY;
|
---|
269 | $(document).simulate("mousemove", pos);
|
---|
270 | el.simulate("mouseup", pos);
|
---|
271 | });
|
---|
272 | });
|
---|
273 |
|
---|
274 | test("{ cursorAt: { right: 10, bottom: 20 } }", function() {
|
---|
275 | expect(4);
|
---|
276 |
|
---|
277 | var deltaX = -3, deltaY = -3,
|
---|
278 | offsetX = 5, offsetY = 5,
|
---|
279 | cursorAtX = 10, cursorAtY = 20;
|
---|
280 |
|
---|
281 | $.each(['relative', 'absolute'], function(i, position) {
|
---|
282 | var el = $('#draggable' + (i + 1)).draggable({
|
---|
283 | cursorAt: { right: cursorAtX, bottom: cursorAtY },
|
---|
284 | drag: function(event, ui) {
|
---|
285 | equals(ui.offset.left, expected.left, position + ' left');
|
---|
286 | equals(ui.offset.top, expected.top, position + ' top');
|
---|
287 | }
|
---|
288 | }),
|
---|
289 | before = el.offset(),
|
---|
290 | pos = {
|
---|
291 | clientX: before.left + offsetX,
|
---|
292 | clientY: before.top + offsetY
|
---|
293 | },
|
---|
294 | expected = {
|
---|
295 | left: before.left + offsetX - el.width() + cursorAtX + deltaX,
|
---|
296 | top: before.top + offsetY - el.height() + cursorAtY + deltaY
|
---|
297 | };
|
---|
298 |
|
---|
299 | el.simulate("mousedown", pos);
|
---|
300 | pos.clientX += deltaX;
|
---|
301 | pos.clientY += deltaY;
|
---|
302 | $(document).simulate("mousemove", pos);
|
---|
303 | el.simulate("mouseup", pos);
|
---|
304 | });
|
---|
305 | });
|
---|
306 |
|
---|
307 | test("{ cursorAt: [10, 20] }", function() {
|
---|
308 | expect(4);
|
---|
309 |
|
---|
310 | var deltaX = -3, deltaY = -3,
|
---|
311 | offsetX = 5, offsetY = 5,
|
---|
312 | cursorAtX = 10, cursorAtY = 20;
|
---|
313 |
|
---|
314 | $.each(['relative', 'absolute'], function(i, position) {
|
---|
315 | var el = $('#draggable' + (i + 1)).draggable({
|
---|
316 | cursorAt: { left: cursorAtX, top: cursorAtY },
|
---|
317 | drag: function(event, ui) {
|
---|
318 | equals(ui.offset.left, expected.left, position + ' left');
|
---|
319 | equals(ui.offset.top, expected.top, position + ' top');
|
---|
320 | }
|
---|
321 | }),
|
---|
322 | before = el.offset(),
|
---|
323 | pos = {
|
---|
324 | clientX: before.left + offsetX,
|
---|
325 | clientY: before.top + offsetY
|
---|
326 | },
|
---|
327 | expected = {
|
---|
328 | left: before.left + offsetX - cursorAtX + deltaX,
|
---|
329 | top: before.top + offsetY - cursorAtY + deltaY
|
---|
330 | };
|
---|
331 |
|
---|
332 | el.simulate("mousedown", pos);
|
---|
333 | pos.clientX += deltaX;
|
---|
334 | pos.clientY += deltaY;
|
---|
335 | $(document).simulate("mousemove", pos);
|
---|
336 | el.simulate("mouseup", pos);
|
---|
337 | });
|
---|
338 | });
|
---|
339 |
|
---|
340 | test("{ cursorAt: '20, 40' }", function() {
|
---|
341 | expect(4);
|
---|
342 |
|
---|
343 | var deltaX = -3, deltaY = -3,
|
---|
344 | offsetX = 5, offsetY = 5,
|
---|
345 | cursorAtX = 20, cursorAtY = 40;
|
---|
346 |
|
---|
347 | $.each(['relative', 'absolute'], function(i, position) {
|
---|
348 | var el = $('#draggable' + (i + 1)).draggable({
|
---|
349 | cursorAt: { left: cursorAtX, top: cursorAtY },
|
---|
350 | drag: function(event, ui) {
|
---|
351 | equals(ui.offset.left, expected.left, position + ' left');
|
---|
352 | equals(ui.offset.top, expected.top, position + ' top');
|
---|
353 | }
|
---|
354 | }),
|
---|
355 | before = el.offset(),
|
---|
356 | pos = {
|
---|
357 | clientX: before.left + offsetX,
|
---|
358 | clientY: before.top + offsetY
|
---|
359 | },
|
---|
360 | expected = {
|
---|
361 | left: before.left + offsetX - cursorAtX + deltaX,
|
---|
362 | top: before.top + offsetY - cursorAtY + deltaY
|
---|
363 | };
|
---|
364 |
|
---|
365 | el.simulate("mousedown", pos);
|
---|
366 | pos.clientX += deltaX;
|
---|
367 | pos.clientY += deltaY;
|
---|
368 | $(document).simulate("mousemove", pos);
|
---|
369 | el.simulate("mouseup", pos);
|
---|
370 | });
|
---|
371 | });
|
---|
372 |
|
---|
373 | test("{ distance: 10 }", function() {
|
---|
374 |
|
---|
375 | el = $("#draggable2").draggable({ distance: 10 });
|
---|
376 | drag(el, -9, -9);
|
---|
377 | moved(0, 0, 'distance not met');
|
---|
378 |
|
---|
379 | drag(el, -10, -10);
|
---|
380 | moved(-10, -10, 'distance met');
|
---|
381 |
|
---|
382 | drag(el, 9, 9);
|
---|
383 | moved(0, 0, 'distance not met');
|
---|
384 |
|
---|
385 | });
|
---|
386 |
|
---|
387 | test("{ grid: [50, 50] }, relative", function() {
|
---|
388 | el = $("#draggable1").draggable({ grid: [50, 50] });
|
---|
389 | drag(el, 24, 24);
|
---|
390 | moved(0, 0);
|
---|
391 | drag(el, 26, 25);
|
---|
392 | moved(50, 50);
|
---|
393 | });
|
---|
394 |
|
---|
395 | test("{ grid: [50, 50] }, absolute", function() {
|
---|
396 | el = $("#draggable2").draggable({ grid: [50, 50] });
|
---|
397 | drag(el, 24, 24);
|
---|
398 | moved(0, 0);
|
---|
399 | drag(el, 26, 25);
|
---|
400 | moved(50, 50);
|
---|
401 | });
|
---|
402 |
|
---|
403 | test("{ handle: 'span' }", function() {
|
---|
404 | el = $("#draggable2").draggable({ handle: 'span' });
|
---|
405 |
|
---|
406 | drag("#draggable2 span", 50, 50);
|
---|
407 | moved(50, 50, "drag span");
|
---|
408 |
|
---|
409 | drag("#draggable2", 50, 50);
|
---|
410 | moved(0, 0, "drag element");
|
---|
411 | });
|
---|
412 |
|
---|
413 | test("{ helper: 'clone' }, relative", function() {
|
---|
414 | el = $("#draggable1").draggable({ helper: "clone" });
|
---|
415 | drag(el, 50, 50);
|
---|
416 | moved(0, 0);
|
---|
417 | });
|
---|
418 |
|
---|
419 | test("{ helper: 'clone' }, absolute", function() {
|
---|
420 | el = $("#draggable2").draggable({ helper: "clone" });
|
---|
421 | drag(el, 50, 50);
|
---|
422 | moved(0, 0);
|
---|
423 | });
|
---|
424 |
|
---|
425 | test("{ helper: 'original' }, relative, with scroll offset on parent", function() {
|
---|
426 |
|
---|
427 | el = $("#draggable1").draggable({ helper: "original" });
|
---|
428 |
|
---|
429 | setScroll();
|
---|
430 | testScroll('relative');
|
---|
431 |
|
---|
432 | setScroll();
|
---|
433 | testScroll('static');
|
---|
434 |
|
---|
435 | setScroll();
|
---|
436 | testScroll('absolute');
|
---|
437 |
|
---|
438 | restoreScroll();
|
---|
439 |
|
---|
440 | });
|
---|
441 |
|
---|
442 | test("{ helper: 'original' }, relative, with scroll offset on root", function() {
|
---|
443 |
|
---|
444 | el = $("#draggable1").draggable({ helper: "original" });
|
---|
445 |
|
---|
446 | setScroll('root');
|
---|
447 | testScroll('relative');
|
---|
448 |
|
---|
449 | setScroll('root');
|
---|
450 | testScroll('static');
|
---|
451 |
|
---|
452 | setScroll('root');
|
---|
453 | testScroll('absolute');
|
---|
454 |
|
---|
455 | restoreScroll('root');
|
---|
456 |
|
---|
457 | });
|
---|
458 |
|
---|
459 | test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
|
---|
460 |
|
---|
461 | el = $("#draggable1").draggable({ helper: "original" });
|
---|
462 |
|
---|
463 | setScroll();
|
---|
464 | setScroll('root');
|
---|
465 | testScroll('relative');
|
---|
466 |
|
---|
467 | setScroll();
|
---|
468 | setScroll('root');
|
---|
469 | testScroll('static');
|
---|
470 |
|
---|
471 | setScroll();
|
---|
472 | setScroll('root');
|
---|
473 | testScroll('absolute');
|
---|
474 |
|
---|
475 | restoreScroll();
|
---|
476 | restoreScroll('root');
|
---|
477 |
|
---|
478 | });
|
---|
479 |
|
---|
480 | test("{ helper: 'original' }, absolute, with scroll offset on parent", function() {
|
---|
481 |
|
---|
482 | el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
483 |
|
---|
484 | setScroll();
|
---|
485 | testScroll('relative');
|
---|
486 |
|
---|
487 | setScroll();
|
---|
488 | testScroll('static');
|
---|
489 |
|
---|
490 | setScroll();
|
---|
491 | testScroll('absolute');
|
---|
492 |
|
---|
493 | restoreScroll();
|
---|
494 |
|
---|
495 | });
|
---|
496 |
|
---|
497 | test("{ helper: 'original' }, absolute, with scroll offset on root", function() {
|
---|
498 |
|
---|
499 | el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
500 |
|
---|
501 | setScroll('root');
|
---|
502 | testScroll('relative');
|
---|
503 |
|
---|
504 | setScroll('root');
|
---|
505 | testScroll('static');
|
---|
506 |
|
---|
507 | setScroll('root');
|
---|
508 | testScroll('absolute');
|
---|
509 |
|
---|
510 | restoreScroll('root');
|
---|
511 |
|
---|
512 | });
|
---|
513 |
|
---|
514 | test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
|
---|
515 |
|
---|
516 | el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
517 |
|
---|
518 | setScroll();
|
---|
519 | setScroll('root');
|
---|
520 | testScroll('relative');
|
---|
521 |
|
---|
522 | setScroll();
|
---|
523 | setScroll('root');
|
---|
524 | testScroll('static');
|
---|
525 |
|
---|
526 | setScroll();
|
---|
527 | setScroll('root');
|
---|
528 | testScroll('absolute');
|
---|
529 |
|
---|
530 | restoreScroll();
|
---|
531 | restoreScroll('root');
|
---|
532 |
|
---|
533 | });
|
---|
534 |
|
---|
535 | test("{ helper: 'original' }, fixed, with scroll offset on parent", function() {
|
---|
536 |
|
---|
537 | el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
538 |
|
---|
539 | setScroll();
|
---|
540 | testScroll('relative');
|
---|
541 |
|
---|
542 | setScroll();
|
---|
543 | testScroll('static');
|
---|
544 |
|
---|
545 | setScroll();
|
---|
546 | testScroll('absolute');
|
---|
547 |
|
---|
548 | restoreScroll();
|
---|
549 |
|
---|
550 | });
|
---|
551 |
|
---|
552 | test("{ helper: 'original' }, fixed, with scroll offset on root", function() {
|
---|
553 |
|
---|
554 | el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
555 |
|
---|
556 | setScroll('root');
|
---|
557 | testScroll('relative');
|
---|
558 |
|
---|
559 | setScroll('root');
|
---|
560 | testScroll('static');
|
---|
561 |
|
---|
562 | setScroll('root');
|
---|
563 | testScroll('absolute');
|
---|
564 |
|
---|
565 | restoreScroll('root');
|
---|
566 | });
|
---|
567 |
|
---|
568 | test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
|
---|
569 |
|
---|
570 | el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
|
---|
571 |
|
---|
572 | setScroll();
|
---|
573 | setScroll('root');
|
---|
574 | testScroll('relative');
|
---|
575 |
|
---|
576 | setScroll();
|
---|
577 | setScroll('root');
|
---|
578 | testScroll('static');
|
---|
579 |
|
---|
580 | setScroll();
|
---|
581 | setScroll('root');
|
---|
582 | testScroll('absolute');
|
---|
583 |
|
---|
584 | restoreScroll();
|
---|
585 | restoreScroll('root');
|
---|
586 |
|
---|
587 | });
|
---|
588 |
|
---|
589 | test("{ helper: 'clone' }, absolute", function() {
|
---|
590 |
|
---|
591 | var helperOffset = null;
|
---|
592 | var origOffset = $("#draggable1").offset();
|
---|
593 |
|
---|
594 | el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
|
---|
595 | helperOffset = ui.helper.offset();
|
---|
596 | } });
|
---|
597 |
|
---|
598 | drag(el, 1, 1);
|
---|
599 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
600 |
|
---|
601 | });
|
---|
602 |
|
---|
603 | test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
|
---|
604 |
|
---|
605 | setScroll();
|
---|
606 | var helperOffset = null;
|
---|
607 | var origOffset = null;
|
---|
608 |
|
---|
609 | el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
|
---|
610 | helperOffset = ui.helper.offset();
|
---|
611 | } });
|
---|
612 |
|
---|
613 | $("#main").css('position', 'relative');
|
---|
614 | origOffset = $("#draggable1").offset();
|
---|
615 | drag(el, 1, 1);
|
---|
616 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
617 |
|
---|
618 | $("#main").css('position', 'static');
|
---|
619 | origOffset = $("#draggable1").offset();
|
---|
620 | drag(el, 1, 1);
|
---|
621 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
622 |
|
---|
623 | $("#main").css('position', 'absolute');
|
---|
624 | origOffset = $("#draggable1").offset();
|
---|
625 | drag(el, 1, 1);
|
---|
626 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
627 |
|
---|
628 | restoreScroll();
|
---|
629 |
|
---|
630 | });
|
---|
631 |
|
---|
632 | test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
|
---|
633 |
|
---|
634 | setScroll('root');
|
---|
635 | var helperOffset = null;
|
---|
636 | var origOffset = null;
|
---|
637 |
|
---|
638 | el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
|
---|
639 | helperOffset = ui.helper.offset();
|
---|
640 | } });
|
---|
641 |
|
---|
642 | $("#main").css('position', 'relative');
|
---|
643 | origOffset = $("#draggable1").offset();
|
---|
644 | drag(el, 1, 1);
|
---|
645 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
646 |
|
---|
647 | $("#main").css('position', 'static');
|
---|
648 | origOffset = $("#draggable1").offset();
|
---|
649 | drag(el, 1, 1);
|
---|
650 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
651 |
|
---|
652 | $("#main").css('position', 'absolute');
|
---|
653 | origOffset = $("#draggable1").offset();
|
---|
654 | drag(el, 1, 1);
|
---|
655 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
656 |
|
---|
657 | restoreScroll('root');
|
---|
658 |
|
---|
659 | });
|
---|
660 |
|
---|
661 | test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
|
---|
662 |
|
---|
663 | setScroll('root');
|
---|
664 | setScroll();
|
---|
665 | var helperOffset = null;
|
---|
666 | var origOffset = null;
|
---|
667 |
|
---|
668 | el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
|
---|
669 | helperOffset = ui.helper.offset();
|
---|
670 | } });
|
---|
671 |
|
---|
672 | $("#main").css('position', 'relative');
|
---|
673 | origOffset = $("#draggable1").offset()
|
---|
674 | drag(el, 1, 1);
|
---|
675 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
676 |
|
---|
677 | $("#main").css('position', 'static');
|
---|
678 | origOffset = $("#draggable1").offset()
|
---|
679 | drag(el, 1, 1);
|
---|
680 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
681 |
|
---|
682 | $("#main").css('position', 'absolute');
|
---|
683 | origOffset = $("#draggable1").offset()
|
---|
684 | drag(el, 1, 1);
|
---|
685 | same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
|
---|
686 |
|
---|
687 | restoreScroll('root');
|
---|
688 | restoreScroll();
|
---|
689 |
|
---|
690 | });
|
---|
691 |
|
---|
692 | test("{ opacity: 0.5 }", function() {
|
---|
693 |
|
---|
694 | expect(1);
|
---|
695 |
|
---|
696 | var opacity = null;
|
---|
697 | el = $("#draggable2").draggable({
|
---|
698 | opacity: 0.5,
|
---|
699 | start: function(event, ui) {
|
---|
700 | opacity = $(this).css("opacity");
|
---|
701 | }
|
---|
702 | });
|
---|
703 |
|
---|
704 | drag("#draggable2", -1, -1);
|
---|
705 |
|
---|
706 | equals(opacity, 0.5, "start callback: opacity is");
|
---|
707 |
|
---|
708 | });
|
---|
709 |
|
---|
710 | test("{ zIndex: 10 }", function() {
|
---|
711 |
|
---|
712 | expect(1);
|
---|
713 |
|
---|
714 | var expected = 10, actual;
|
---|
715 |
|
---|
716 | var zIndex = null;
|
---|
717 | el = $("#draggable2").draggable({
|
---|
718 | zIndex: expected,
|
---|
719 | start: function(event, ui) {
|
---|
720 | actual = $(this).css("zIndex");
|
---|
721 | }
|
---|
722 | });
|
---|
723 |
|
---|
724 | drag("#draggable2", -1, -1);
|
---|
725 |
|
---|
726 | equals(actual, expected, "start callback: zIndex is");
|
---|
727 |
|
---|
728 | });
|
---|
729 |
|
---|
730 | })(jQuery);
|
---|