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

javascript html

king1761 2018-08-06 17:43:07 ‧ 4728 瀏覽

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

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

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

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

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

登入發表討論

直播研討會

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

直播中

2 個回答

froce

iT邦大師 1 級 ‧ 2018-08-06 21:48:18

最佳解答

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

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

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

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

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

我取得的是綠色那一條距離..... (鼠標和邊界的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>");
    }
}

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的位置