Skip to content
Permalink
Browse files

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

- added many new tests to draggable, especially related to scrolling and helper clone
  • Loading branch information...
Paul Bakaus
Paul Bakaus committed Sep 15, 2008
1 parent ee30dbb commit 7ba2beb903276f43e1ac322abd6e1fcc522e3b9e
Showing with 297 additions and 65 deletions.
  1. +4 −1 tests/draggable.html
  2. +159 −0 tests/draggable.js
  3. +134 −64 ui/ui.draggable.js
@@ -31,10 +31,13 @@ <h2 id="userAgent"></h2>

<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>
@@ -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);

0 comments on commit 7ba2beb

Please sign in to comment.
You can’t perform that action at this time.