Center drag item on targetbox

Saola Animate Support Questions
1

Hi,

on Drag and drop, how do I center the drag item on the targetbox when its dropped on it?

Thanks.

2

Ok i’ve tried the following, not sure if it correct, but how do I center the drag item over the target box ?

var dragSource = doc.findElementByDom(ui.draggable[0]);
var dropTarget = doc.findElementByDom(this);

var dPos = $(this).offset();
var offset = ui.offset;
dragSource.setPosition(dPos.left,dPos.Top );
3

Hi,

In the drop event handler, you can center the drag source as follows:

// center drag source on drop target
var dX = ($(this).width() - ui.draggable.width()) / 2;
var dY = ($(this).height() - ui.draggable.height()) / 2;
ui.draggable.css({
	left: this.offsetLeft + dX,
	top: this.offsetTop + dY,
	transform: this.style.transform
});

I’ve also updated the sample project to include this piece of code in your previous thread: How to get name of drop target - #2 by ToanLS

Regards

4

very cool. Thank you. I haven’t done much when it comes to coding with Saola.
Learning it as needed.

Thanks!