If I understand your purpose correctly, you need to take care of a few things.
1. Relative position
When the parent of the HTML element changes (i.e., the element is added to another element), its position on the screen changes, unless this position property is not fixed (which is not the default value).
So when you add a div to $('.formBackground') (I will just call it formBackground ), its position will refer to its previous relationship or, if there is no previous brother, to formBackground itself. formBackground To get around this, you must subtract the offset of formBackground from the offset of the draggable.
In addition, you need to set position to absolute , so draggable is always displayed relative to formBackground instead of the previous one being dragged.
The CSS position property is described here .
To do this, delete this passage (lines 19-22 in your violin):
$(objName).css({ "left": pos.left, "top": pos.top });
And instead, add the following snippet after element.addClass("tempclass"); (currently line 43):
element.css({ "position": "absolute", "left": ui.offset.left - $(this).offset().left, "top": ui.offset.top - $(this).offset().top });
The next thing to take care of is:
2. Offset scaling
If now you set var percent = 1.0; in row 1, the draggable should remain where it is.
However, it will not be with any other factor, since its displacement is also multiplied.
The CSS transform property and its scale() value are explained here , however, the documentation does not mention that this refers to the offset of the object, it also seems to be that way.
You can simply edit the snippet above to divide left and top by percent :
element.css({ "position": "absolute", "left": (ui.offset.left - $(this).offset().left) / percent, "top": (ui.offset.top - $(this).offset().top) / percent });
Now the top left corner of the draggable should always remain where you drop it, regardless of what percent set for.
I forked and edited your violin to reflect these two changes. Since I don't have a 10 reputation yet, I can't post more than two links, but here it’s all the same: http://jsfiddle.net/n7yns9eq/2/
3. (Optional) Convert to the top left
I think this is a little more convenient in order to make a "reference point" for the elements of their center instead of their upper left corner. It seems more intuitive to me. If you find this too, here's how to do it:
From left / top you must subtract half the amount by width / height . In code:
element.css({ "position": "absolute", "left": (ui.offset.left - $(this).offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent, "top": (ui.offset.top - $(this).offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent });
Note that instead of $(ui.draggable) you cannot use element because element not displayed at this point and since it does not have an explicit value set for height , element.height() will return 0 .
Fiddle: http://jsfiddle.net/9xbgqdeo/1/
4. Dead areas and disproportionate movement
Another problem that I noticed was that now, if you drop the formBackground being dragged to the bottom of the left side of the third, the drop will not happen. I do not know if this is caused by the browser mechanism (without changing the size of the functional area of the object) or jquery (excluding transformations).
The only way I can work with this is to make body droppable instead of formBackground , check if it is within the boundaries of formBackground , and if so, add it there, discard it otherwise.
Please note that for this, if your page does not fill the entire browser window, you need to set the following CSS:
html, body { width: 100%; height: 100%; }
And don't forget to replace each this in the droppable function with $('.formBackground') .
In addition, when grabbing an existing drag and drop from formBackground and moving it around, it deviates from the cursor, which I consider undesirable. To prevent this, I suggest moving the div back to the original parent and returning the offset changes that were made when it was reset to formBackground .
I'm honestly too lazy to offer scripts for these two changes now (edit: http://jsfiddle.net/gtc17z6b/1/ ), but I hope this solves your question anyway.