I’m creating a web application and I have some feature where the user can drag some text in the page to their desired position and if they click save button, the next page shows the same text at the position they dropped. It is working but the position is not perfect, somewhat slightly changes from the original one.
I implemented such feature in this jsfiddle http://jsfiddle.net/rkumarnirmal/AmEeH/
You can see the #text-preview which is the original text where you can drag it to the desired position. After you dropped, I want to move #ttext-preview to the same position where #text-preview is dropped. But the #ttext-preview position is not changing.
I just want to know why the position slightly changes from the original text dropped position in my web application. I try to show the problem in the jsfiddle, but the jsfiddle itself is not working ( I can’t change the css top and left property of #ttext-preview dynamically through jquery ).
Could anyone guide me?
Thanks!
I think it is because of the border that you use during the dragging. When you change that into a background color it works fine: http://jsfiddle.net/qvS2t/
If you want to keep using the border I would add some extra padding on the non-hovering tekst and replace that with the border when the hover is active. Here’s a jsfiddle that shows how to do this: http://jsfiddle.net/jdCAx/