[Question] Offset Item On Drag Start / Grid Receive Events

[MB-ChrisMcLaughlin]

Good Afternoon,

First of all, thank you for providing this library! I have a question, to which I have looked in the documentation and previous answers for and have not found much that would help.

What Am I Trying To Do:

1 When the user drags a grid item, I want the dragged item's center, to match the cursors location.

Solution? redGrid.on('dragStart', function(item, event) { const itemRect = item.getElement().getBoundingClientRect(); item._drag._moveDiffX = (itemRect.left + (itemRect.width / 2)) - event.clientX; item._drag._moveDiffY = (itemRect.top + (itemRect.height / 2)) - event.clientY; }); Question: Is this the right way to do this?

2 When the user drags a grid item into a new grid, I update the dragged object's size and refresh the item.

blueGrid.on('receive', function (data) { const item = data.item; const element = item.getElement(); const olditemRect = element.getBoundingClientRect(); element.style.width = '150px'; element.style.height = '150px'; const itemRect = element.getBoundingClientRect(); const left = (itemRect.left + (itemRect.width / 2)) - (olditemRect.left + (olditemRect.width / 2)); const top = (itemRect.top + (itemRect.height / 2)) - (olditemRect.top + (olditemRect.height / 2)); item._drag._left -= left; item._drag._top -= top; blueGrid.refreshItems([item]).layout(); });

However because of the change in size, the item is no longer in the center of the users cursor and it does not correctly place the object or placeholder in the new grid. Is there a way to offset the item, without affecting other systems?

I have tried overriding the transform, but then the placeholder does not work correctly. Thoughts? DEMO: https://jsfiddle.net/td0ufm5x/4/

Thanks