如何用jquery抓到物件的動態位置？

jquery offset javascript json

COCO 2019-03-06 00:20:19 ‧ 3646 瀏覽

目前想要達成以下效果,有兩個區塊
<畫面>
右邊是元件區
左邊是放置區

<要完成的動作>
元件區有一個正方形物件,要把這個物件拖到放置區～
並且有一個顯示欄位可以顯示目前這個正方形的元件再放置區的Ｘ座標與Ｙ座標還有顯示這個物件的寬與高,並且修改座標位置以及寬高數值,使這個物件可以隨著數值的變動可以改變位置與寬高。

由於實在卡了兩天,一直找不到要用jquery怎麼寫,希望有前輩可以提點一下菜鳥。
只知道可以用offset來抓座標其他就真的沒有方向了～

無論有沒有人回應都先跟大家說聲謝謝！

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2019-03-06 08:04:13 檢舉

https://jsbin.com/tijuwuzuku/1/edit?html,output
以前寫的範例。
多用一點console.log去看DOM node你會學到更多。

這類操作JQ應該沒辦法省太多code。

gkfat iT邦新手 5 級 ‧ 2019-03-06 09:59:35 檢舉

先感謝分享。

大大的「拖我啊」元件在拖曳到放置區內之後，就不能再拖了。
您用的方式是「取得放開拖曳瞬間的(x,y)座標，並生成一個新的元素」，但這個元件似乎沒有帶 id="dragme"。

想請問是否有簡便的解法？

froce iT邦大師 1 級 ‧ 2019-03-06 12:02:15 檢舉

範例寫給你了，自己想辦法囉，都小問題而已。

froce iT邦大師 1 級 ‧ 2019-03-06 12:02:17 檢舉

範例寫給你了，自己想辦法囉，都小問題而已。

ccutmis iT邦高手 2 級 ‧ 2019-03-06 14:13:48 檢舉

我弄了一個範例給你參考
http://www.web3d.url.tw/hots/testDrag.htm
對內容有興趣的話直接看源碼就可以了

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

亮

iT邦新手 5 級 ‧ 2019-03-06 13:30:59

最佳解答

這裡有很多Draggable的範例，可以拿來改看看喔~
http://www.runoob.com/jqueryui/example-draggable.html

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

IT邦幫忙