Skip to content

Commit ec4d469

Browse files
scottgonzalezscottgonzalez
committed
Draggable: Support hash, array, string for cursorAt option. Partial fix for #2525 - Standardised way to pass coordinates to plugins.
1 parent a962d52 commit ec4d469

File tree

2 files changed

+139
-52
lines changed

2 files changed

+139
-52
lines changed

‎tests/unit/draggable/draggable_options.js‎

Lines changed: 120 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -239,61 +239,135 @@ test("{ cursorAt: false}, default", function() {
239239
});
240240

241241
test("{ cursorAt: { left: -5, top: -5 } }", function() {
242-
243242
expect(4);
244243

245-
var dx = -3, dy = -3;
246-
var ox = 5, oy = 5;
247-
var cax = -5, cay = -5;
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+
});
248273

249-
var actual = null;
250-
$("#draggable2").draggable({
251-
cursorAt: { left: cax, top: cay },
252-
drag: function(event, ui) {
253-
actual = ui.offset;
254-
}
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);
255304
});
256-
var el = $("#draggable2").data("draggable").element;
257-
258-
var before = el.offset();
259-
var pos = { clientX: before.left + ox, clientY: before.top + oy };
260-
$("#draggable2").simulate("mousedown", pos);
261-
pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
262-
$(document).simulate("mousemove", pos);
263-
$(document).simulate("mousemove", pos);
264-
$("#draggable2").simulate("mouseup", pos);
265-
var expected = {
266-
left: before.left + ox - cax + dx,
267-
top: before.top + oy - cay + dy
268-
};
305+
});
269306

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

273-
var actual = null;
274-
$("#draggable1").draggable({
275-
cursorAt: { left: cax, top: cay },
276-
drag: function(event, ui) {
277-
actual = ui.offset;
278-
}
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);
279337
});
280-
var el = $("#draggable2").data("draggable").element;
281-
282-
var before = el.offset();
283-
var pos = { clientX: before.left + ox, clientY: before.top + oy };
284-
$("#draggable2").simulate("mousedown", pos);
285-
pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
286-
$(document).simulate("mousemove", pos);
287-
$(document).simulate("mousemove", pos);
288-
$("#draggable2").simulate("mouseup", pos);
289-
var expected = {
290-
left: before.left + ox - cax + dx,
291-
top: before.top + oy - cay + dy
292-
};
338+
});
293339

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

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+
});
297371
});
298372

299373
test("{ distance: 10 }", function() {

‎ui/ui.draggable.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,7 @@ $.widget("ui.draggable", $.extend({}, $.ui.mouse, {
103103
this.originalPageY = event.pageY;
104104

105105
//Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
106-
if(o.cursorAt)
107-
this._adjustOffsetFromHelper(o.cursorAt);
106+
(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
108107

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

204203
_adjustOffsetFromHelper: function(obj) {
205-
if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left;
206-
if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
207-
if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top;
208-
if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
204+
if (typeof obj == 'string') {
205+
obj = obj.split(' ');
206+
}
207+
if ($.isArray(obj)) {
208+
obj = {left: +obj[0], top: +obj[1] || 0};
209+
}
210+
if ('left' in obj) {
211+
this.offset.click.left = obj.left + this.margins.left;
212+
}
213+
if ('right' in obj) {
214+
this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
215+
}
216+
if ('top' in obj) {
217+
this.offset.click.top = obj.top + this.margins.top;
218+
}
219+
if ('bottom' in obj) {
220+
this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
221+
}
209222
},
210223

211224
_getParentOffset: function() {

0 commit comments

Comments
 (0)