- kickass draggable refactoring - fixes many bugs, many edge case issues

- added many new tests to draggable, especially related to scrolling and helper clone

2 files changed, 163 insertions, 1 deletions

diff --git a/tests/draggable.html b/tests/draggable.html
index 1c8069b41..0110e334c 100644
--- a/tests/draggable.html
+++ b/tests/draggable.html
@@ -31,10 +31,13 @@
 
 <ol id="tests"></ol>
 
-<div id="main" style="border: 1px solid black; padding: 10px; margin: 10px;">
+<div id="main" style="border: 1px solid black; padding: 10px; margin: 10px; height: 500px; overflow: auto;">
 	<div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
 	<div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
+	<div style='width: 1px; height: 1000px;'></div>
 </div>
 
+<div style="width: 1px; height: 2000px;"></div>
+
 </body>
 </html>
diff --git a/tests/draggable.js b/tests/draggable.js
index 9234b3567..6045d00f2 100644
--- a/tests/draggable.js
+++ b/tests/draggable.js
@@ -445,8 +445,166 @@ test("callbacks occurance count", function() {
 	
 });
 
+module("draggable: Scroll offsets");
+
+test("{ helper: 'original' }, relative, with scroll offset on parent", function() {
+	el = $("#draggable1").draggable({ helper: "original" });
+	$("#main")[0].scrollTop = 100;
+	drag(el, 50, 50);
+	moved(50, 50);
+	$("#main")[0].scrollTop = 0;
+});
+
+test("{ helper: 'original' }, relative, with scroll offset on root", function() {
+	el = $("#draggable1").draggable({ helper: "original" });
+	$(document).scrollTop(100);
+	drag(el, 50, 50);
+	moved(50, 50);
+	$(document).scrollTop(0);
+});
+
+test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
+	el = $("#draggable1").draggable({ helper: "original" });
+	$(document).scrollTop(100);
+	$("#main")[0].scrollTop = 100;
+	drag(el, 50, 50);
+	moved(50, 50);
+	$(document).scrollTop(0);
+	$("#main")[0].scrollTop = 0;
+});
+
+test("{ helper: 'original' }, absolute, with scroll offset on parent", function() {
+	el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
+	$("#main")[0].scrollTop = 100;
+	drag(el, 50, 50);
+	moved(50, 50);
+	$("#main")[0].scrollTop = 0;
+});
+
+test("{ helper: 'original' }, absolute, with scroll offset on root", function() {
+	el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
+	$(document).scrollTop(100);
+	drag(el, 50, 50);
+	moved(50, 50);
+	$(document).scrollTop(0);
+});
+
+test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
+	el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
+	$(document).scrollTop(100);
+	$("#main")[0].scrollTop = 100;
+	drag(el, 50, 50);
+	moved(50, 50);
+	$(document).scrollTop(0);
+	$("#main")[0].scrollTop = 0;
+});
+
+//Fixed not for IE < 7
+if(!($.browser.msie && $.browser.version < 7)) {
+
+	test("{ helper: 'original' }, fixed, with scroll offset on parent", function() {
+		el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
+		$("#main")[0].scrollTop = 100;
+		drag(el, 50, 50);
+		moved(50, 50);
+		$("#main")[0].scrollTop = 0;
+	});
+	
+	test("{ helper: 'original' }, fixed, with scroll offset on root", function() {
+		el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
+		$(document).scrollTop(100);
+		drag(el, 50, 50);
+		moved(50, 50);
+		$(document).scrollTop(0);
+	});
+	
+	test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
+		el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
+		$(document).scrollTop(100);
+		$("#main")[0].scrollTop = 100;
+		drag(el, 50, 50);
+		moved(50, 50);
+		$(document).scrollTop(0);
+		$("#main")[0].scrollTop = 0;
+	});
+
+}
+
+
+
+test("{ helper: 'clone' }, absolute", function() {
+	
+	var helperOffset = null;
+	var origOffset = $("#draggable1").offset();
+	
+	el = $("#draggable1").draggable({ helper: "clone", drag: function(e, ui) {
+		helperOffset = ui.helper.offset();
+	} });
+
+	drag(el, 1, 1);
+	
+	compare2({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
+
+});
+
+test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
+	
+	$("#main")[0].scrollTop = 100;
+	var helperOffset = null;
+	var origOffset = $("#draggable1").offset();
+	
+	el = $("#draggable1").draggable({ helper: "clone", drag: function(e, ui) {
+		helperOffset = ui.helper.offset();
+	} });
+
+	drag(el, 1, 1);
+	
+	compare2({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
+	$("#main")[0].scrollTop = 0;
+
+});
+
+test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
+	
+	$(document).scrollTop(100);
+	var helperOffset = null;
+	var origOffset = $("#draggable1").offset();
+	
+	el = $("#draggable1").draggable({ helper: "clone", drag: function(e, ui) {
+		helperOffset = ui.helper.offset();
+	} });
+
+	drag(el, 1, 1);
+	
+	compare2({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
+	$(document).scrollTop(0);
+
+});
+
+test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
+	
+	$(document).scrollTop(100);
+	$("#main")[0].scrollTop = 100;
+	var helperOffset = null;
+	var origOffset = $("#draggable1").offset();
+	
+	el = $("#draggable1").draggable({ helper: "clone", drag: function(e, ui) {
+		helperOffset = ui.helper.offset();
+	} });
+
+	drag(el, 1, 1);
+	
+	compare2({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
+	$(document).scrollTop(0);
+	$("#main")[0].scrollTop = 0;
+
+});
+
+
 module("draggable: Tickets");
 
+/* This needs to be rewritten
+
 test("#2965 cursorAt with margin", function() {
 	
 	expect(2);
@@ -487,5 +645,6 @@ test("#2965 cursorAt with margin", function() {
 	equals(actual.top, expected.top, "10px margin. top");
 	
 });
+*/
 
 })(jQuery);