Interact.js: After auto-positioning a draggable image via jquery, dragging is screwed up

[HerrimanCoder]

I have 4 draggable images and 6 drop zones on a web page, and when I leave the draggable images in their default positions, everything works great. But when, upon page load, I auto-position one of my draggable images onto drop zone 1, that image cannot be dragged anymore without very strange behaviors. You can see this for yourself, and try it out. First, here is what it looks like by default, with no jquery auto-position occurring:

http://instant-rsvp.com/temp/workscreen/screen1.png

And here is what it looks like when image1 is auto-positioned (upon page load, via jquery):

http://instant-rsvp.com/temp/workscreen/screen2.png

Here is my jquery that executes on page load:
$("#drag1").css("left", "81.2357940673828px").css("top", "123.616467285156px");

So far, everything looks fine. But now try to drag image1 anywhere on the page:

http://instant-rsvp.com/temp/workscreen/

You will see that the mouse pointer is WAY off from the draggable image1. Or more accurately, the mouse pointer's position is correct, but image1 "jumps back" to its original default position before the jquery moved it. So the question is, when auto-positioning a draggable element upon page load, how can I get that element in sync with the mouse pointer and avoid this problem? There must be some way to tell interact.js that an element has moved, and bring the x/y properties in sync.

Thanks for your time.

[HerrimanCoder]

Here's the answer, in case it helps others. After doing this:
$("#drag1").css("left", "81.2357940673828px").css("top", "123.616467285156px");

You then need to do this:
$("#drag1").attr("data-x", "81.2357940673828").attr("data-y", "123.616467285156");