Skip to content
Permalink
Browse files

Draggable: Support hash, array, string for cursorAt option. Partial f…

…ix for #2525 - Standardised way to pass coordinates to plugins.
  • Loading branch information
scottgonzalez committed Aug 3, 2009
1 parent a962d52 commit ec4d469a36a656c57c336a5063ed6d53334a8479
Showing with 139 additions and 52 deletions.
  1. +120 −46 tests/unit/draggable/draggable_options.js
  2. +19 −6 ui/ui.draggable.js
@@ -239,61 +239,135 @@ test("{ cursorAt: false}, default", function() {
});

test("{ cursorAt: { left: -5, top: -5 } }", function() {

expect(4);

var dx = -3, dy = -3;
var ox = 5, oy = 5;
var cax = -5, cay = -5;
var deltaX = -3, deltaY = -3,
offsetX = 5, offsetY = 5,
cursorAtX = -5, cursorAtY = -5;

$.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({
cursorAt: { left: cursorAtX, top: cursorAtY },
drag: function(event, ui) {
equals(ui.offset.left, expected.left, position + ' left');
equals(ui.offset.top, expected.top, position + ' top');
}
}),
before = el.offset(),
pos = {
clientX: before.left + offsetX,
clientY: before.top + offsetY
},
expected = {
left: before.left + offsetX - cursorAtX + deltaX,
top: before.top + offsetY - cursorAtY + deltaY
};

el.simulate("mousedown", pos);
pos.clientX += deltaX;
pos.clientY += deltaY;
$(document).simulate("mousemove", pos);
el.simulate("mouseup", pos);
});
});

var actual = null;
$("#draggable2").draggable({
cursorAt: { left: cax, top: cay },
drag: function(event, ui) {
actual = ui.offset;
}
test("{ cursorAt: { right: 10, bottom: 20 } }", function() {
expect(4);

var deltaX = -3, deltaY = -3,
offsetX = 5, offsetY = 5,
cursorAtX = 10, cursorAtY = 20;

$.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({
cursorAt: { right: cursorAtX, bottom: cursorAtY },
drag: function(event, ui) {
equals(ui.offset.left, expected.left, position + ' left');
equals(ui.offset.top, expected.top, position + ' top');
}
}),
before = el.offset(),
pos = {
clientX: before.left + offsetX,
clientY: before.top + offsetY
},
expected = {
left: before.left + offsetX - el.width() + cursorAtX + deltaX,
top: before.top + offsetY - el.height() + cursorAtY + deltaY
};

el.simulate("mousedown", pos);
pos.clientX += deltaX;
pos.clientY += deltaY;
$(document).simulate("mousemove", pos);
el.simulate("mouseup", pos);
});
var el = $("#draggable2").data("draggable").element;

var before = el.offset();
var pos = { clientX: before.left + ox, clientY: before.top + oy };
$("#draggable2").simulate("mousedown", pos);
pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
$(document).simulate("mousemove", pos);
$(document).simulate("mousemove", pos);
$("#draggable2").simulate("mouseup", pos);
var expected = {
left: before.left + ox - cax + dx,
top: before.top + oy - cay + dy
};
});

equals(actual.left, expected.left, "Absolute: -1px left");
equals(actual.top, expected.top, "Absolute: -1px top");
test("{ cursorAt: [10, 20] }", function() {
expect(4);

var actual = null;
$("#draggable1").draggable({
cursorAt: { left: cax, top: cay },
drag: function(event, ui) {
actual = ui.offset;
}
var deltaX = -3, deltaY = -3,
offsetX = 5, offsetY = 5,
cursorAtX = 10, cursorAtY = 20;

$.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({
cursorAt: { left: cursorAtX, top: cursorAtY },
drag: function(event, ui) {
equals(ui.offset.left, expected.left, position + ' left');
equals(ui.offset.top, expected.top, position + ' top');
}
}),
before = el.offset(),
pos = {
clientX: before.left + offsetX,
clientY: before.top + offsetY
},
expected = {
left: before.left + offsetX - cursorAtX + deltaX,
top: before.top + offsetY - cursorAtY + deltaY
};

el.simulate("mousedown", pos);
pos.clientX += deltaX;
pos.clientY += deltaY;
$(document).simulate("mousemove", pos);
el.simulate("mouseup", pos);
});
var el = $("#draggable2").data("draggable").element;

var before = el.offset();
var pos = { clientX: before.left + ox, clientY: before.top + oy };
$("#draggable2").simulate("mousedown", pos);
pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
$(document).simulate("mousemove", pos);
$(document).simulate("mousemove", pos);
$("#draggable2").simulate("mouseup", pos);
var expected = {
left: before.left + ox - cax + dx,
top: before.top + oy - cay + dy
};
});

equals(actual.left, expected.left, "Relative: -1px left");
equals(actual.top, expected.top, "Relative: -1px top");
test("{ cursorAt: '20, 40' }", function() {
expect(4);

var deltaX = -3, deltaY = -3,
offsetX = 5, offsetY = 5,
cursorAtX = 20, cursorAtY = 40;

$.each(['relative', 'absolute'], function(i, position) {
var el = $('#draggable' + (i + 1)).draggable({
cursorAt: { left: cursorAtX, top: cursorAtY },
drag: function(event, ui) {
equals(ui.offset.left, expected.left, position + ' left');
equals(ui.offset.top, expected.top, position + ' top');
}
}),
before = el.offset(),
pos = {
clientX: before.left + offsetX,
clientY: before.top + offsetY
},
expected = {
left: before.left + offsetX - cursorAtX + deltaX,
top: before.top + offsetY - cursorAtY + deltaY
};

el.simulate("mousedown", pos);
pos.clientX += deltaX;
pos.clientY += deltaY;
$(document).simulate("mousemove", pos);
el.simulate("mouseup", pos);
});
});

test("{ distance: 10 }", function() {
@@ -103,8 +103,7 @@ $.widget("ui.draggable", $.extend({}, $.ui.mouse, {
this.originalPageY = event.pageY;

//Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
if(o.cursorAt)
this._adjustOffsetFromHelper(o.cursorAt);
(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));

//Set a containment if given in the options
if(o.containment)
@@ -202,10 +201,24 @@ $.widget("ui.draggable", $.extend({}, $.ui.mouse, {
},

_adjustOffsetFromHelper: function(obj) {
if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left;
if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top;
if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
if (typeof obj == 'string') {
obj = obj.split(' ');
}
if ($.isArray(obj)) {
obj = {left: +obj[0], top: +obj[1] || 0};
}
if ('left' in obj) {
this.offset.click.left = obj.left + this.margins.left;
}
if ('right' in obj) {
this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
}
if ('top' in obj) {
this.offset.click.top = obj.top + this.margins.top;
}
if ('bottom' in obj) {
this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
}
},

_getParentOffset: function() {

0 comments on commit ec4d469

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