iT邦幫忙

2

HTML 使用Drag 和 Drop 事件要如何偵測 被拖拉物件的座標?

參考了這篇文章使用 Drag 和 Drop
https://pjchender.blogspot.com/2017/08/html5-drag-and-drop-api.html

想要製作能夠拖拉物件 到指定區域的功能
如下圖所示

https://ithelp.ithome.com.tw/upload/images/20180806/20109483VjUe9vSnsM.png

想要將大象(div)拖拉到我所拖移到的位子
目前已經能有移動的效果了,可是都會卡在左上角

https://ithelp.ithome.com.tw/upload/images/20180806/20109483dPACbKX6OE.png
想要監控被拖拉住時物件的offset().top /offset().left 再透過css來做定位
可是使用Listener的event 都只有取道滑鼠點擊的(x,y) 沒辦法取得到物件對應的(x,y)

求問有什麼比較好解的方法呢...?

2
froce
iT邦高手 1 級 ‧ 2018-08-06 21:48:18
最佳解答

https://blog.csdn.net/lzding/article/details/45437707

你可以用(pageX-offsetX, pageY-offsetY)得到物件的左上角

看更多先前的回應...收起先前的回應...
king1761 iT邦新手 5 級 ‧ 2018-08-07 09:46:24 檢舉

froce我有使用過這個方法,只不過我取得到的offsetX、offsetY是 我鼠標距離邊界的距離..... 不是和您給的參考文件一樣

https://ithelp.ithome.com.tw/upload/images/20180807/20109483M0edEVRPtc.png
我取得的是綠色那一條距離..... (鼠標和邊界的offset 不是鼠標和物件的offset)

king1761 iT邦新手 5 級 ‧ 2018-08-07 09:59:50 檢舉

HTML的部分:

 <div class="control-Blcok" >
    <div id="components_list" data-role='drag-drop-container'>
    </div>
    <div id="qoo" data-role='drag-drop-container'>

    </div>
</div>

插入物件的區塊:

function getComponentList(component) {
    for (let i = 0; i < component.length; i++) {
      $('#components_list').append("<div class='ShowBox'>" +"<div class='imgShow imgShow" + i + "' id='drag-source' draggable='true'><img src='" + component[i].id + "'></div>"+"</div>");
    }
}

https://ithelp.ithome.com.tw/upload/images/20180807/20109483tpPbnYaERQ.png

https://ithelp.ithome.com.tw/upload/images/20180807/20109483159toW6sQl.png

froce iT邦高手 1 級 ‧ 2018-08-07 10:30:34 檢舉

你要不要把code丟到js bin之類的網站,讓人好改?
另外我沒看到你offset相關的code。

froce iT邦高手 1 級 ‧ 2018-08-07 20:00:41 檢舉

demo:
https://jsbin.com/tijuwuzuku/1/edit?html,output

後來想想,用layerX/Y去減offsetX/Y就好了。
重點是:
1.放置的container要設成 position: absolute;
2.拖曳的elm要設成 position: relative;
3.讓container在drop的時候,用e.layerX/Y去減offsetX/Y
4.設定elm在container的位置

king1761 iT邦新手 5 級 ‧ 2018-08-08 09:17:49 檢舉

大大感謝 F大 !/images/emoticon/emoticon02.gif

參考了一下你的code 後來改一改就可以了
/images/emoticon/emoticon32.gif

不明
【**此則訊息已被站方移除**】
0
joneshong
iT邦新手 5 級 ‧ 2018-08-07 16:00:15

不知道您是否有接觸 RxJS
站內有不錯的資源可以學習使用 [連結]

可是使用Listener的event 都只有取道滑鼠點擊的(x,y) 沒辦法取得到物件對應的(x,y)

您可以嘗試在 dragStart裡面 console.log(e)
看到裡面有個target應該是你拖拉的對象
所以該(x,y)就是您開始拖拉的起始點

在 drop裡 console.log(e)
可以看到您放開滑鼠的點座標(x,y)

這問題的觀念應該就是:
“拖拉對象的座標“ 改成 ”放開滑鼠後的座標“ 就搞定了吧!

froce iT邦高手 1 級 ‧ 2018-08-07 16:28:27 檢舉

那樣滑鼠座標會變成拖拉後物件的左上角。
另外物件要設定成float或是relative,才能接受offset的設定。
回家有時間寫個範例吧,其實不難,也不用用到Reactive Programming。

joneshong iT邦新手 5 級 ‧ 2018-08-08 00:04:13 檢舉

哈哈...我也不是要他照著這程式碼照打...
只是提供一種思路順順邏輯
也從他的問題中學習一些沒自己寫過的方法
教學相長、獲益良多
/images/emoticon/emoticon41.gif

大哥您很厲害這種問題難不倒您!
希望您繼續加油幫助那些需要幫助的人!
/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答