2012-05-20 95 views
1

我創建一個web應用程序,我有一些功能,使用戶可以拖動頁面中的一些文本到所需的位置,如果他們點擊保存按鈕,下一個頁面顯示了相同的文字在他們丟下的位置。它正在工作,但地位並不完美,與原來的稍有不同。jQuery的位置()似乎並不完美

我在這的jsfiddle http://jsfiddle.net/rkumarnirmal/AmEeH/

實現這樣的功能,你可以看到#文本預覽這是原文在這裏您可以將其拖動到所需的位置。你掉後,我想#ttext預覽移動到#文本預覽被丟棄的同一位置。但#ttext-preview位置不變。

我只是想知道爲什麼的位置稍有變化,從原來的文字在我的web應用程序的降落位置。我試圖表明在的jsfiddle的問題,但本身的jsfiddle不工作(我不能更改CSS 頂部和左側#ttext預覽財產動態,通過jQuery的)。

有人能指導我嗎?

謝謝!

+0

我敢肯定這是不是它,但你的意思在的jsfiddle輕微移位,由於掉落元素之後去除邊界? – koenpeters

+0

是的,我看到文字位置從最初放下的位置略有變化。這是由於懸停邊界造成的嗎?但我需要這個邊界。 – rnk

+0

我添加了關於邊框問題的答案。不知道這是否是你遇到的問題。查看我創建的小提琴,以顯示沒有邊框的版本。 – koenpeters

回答

1

我想這是因爲你在使用的邊界拖動。當你改變它爲背景色時,它工作正常:http://jsfiddle.net/qvS2t/

如果你想繼續使用邊框,我會在非懸停tekst上添加一些額外的填充,並在懸停處於活動狀態時用邊框替換它。這裏說明了如何做這個的jsfiddle:http://jsfiddle.net/jdCAx/

+0

我已經嘗試在頂部和左側添加3px。但仍然不同。你可以讓我看看jsfiddle中的工作示例嗎?謝謝! – rnk

+0

我改變了我的答案,並添加了第二個jsfiddle,告訴你如何輕鬆解決這個問題。希望能幫助到你。 – koenpeters

+0

感謝您的幫助@koenp,但現在看這個http://jsfiddle.net/rkumarnirmal/jdCAx/2/你能看到區別? – rnk

0
  1. 初始.position()獲取座標RELATIVE到父!

  2. 另一件事可能是邊境/保證金/填充-的問題,有很多在這裏http://api.jquery.com/position/!您正在使用一個奇怪的懸停邊界,這可能irretate位置的事情,因爲元素是不是在0,0再當你在它懸停

+0

那麼我做了什麼錯誤,顯示的文字與最初丟棄的位置有些不同? – rnk

+0

但我需要懸停邊框,以顯示文字是可拖動的。 – rnk

+0

@rnk你的問題是懸停在元素上後出現的BORDER!嘗試使div的邊框INSIDE或通過div解決方案中的div來解決此問題。 – Sliq