本文介紹了HTML5拖放以將div移動到屏幕上的任何位置?的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
限時送ChatGPT賬號..
標題很清楚.
我發現的所有演示都包括將 div 放到某個位置.例如垃圾桶.我需要制作一個可拖動的 div，它可以放在屏幕上的任何位置.
All the demos I've found consist in dropping a div to a certain location. E.G a trashcan. I need to make a draggable div that can be dropped anywhere on the screen.
HTML5 可以做到這一點嗎?如果不是我應該怎么做?
Is it possible to do this with HTML5? if not how should I do it?
推薦答案
真的很簡單:
- 在
dragstart事件中計算用戶點擊可拖動元素的位置與左上角之間的偏移量 - 確保將
dragover事件應用于整個文檔，以便可以將元素拖放到任何地方 - 在
drop事件中，使用您使用 drop 的clientX和clientY計算出的偏移量來計算元素的位置
- In the
dragstartevent calculate the offset between where the user clicked on the draggable element and the top left corner - Make sure the
dragoverevent is applied to the entire document so the element can be dropped anywhere - In the
dropevent, use the offset you calculated with theclientXandclientYof the drop to work out where to position the element
這是一個 我 早前準備.對于獎勵積分，您可以在 中更新元素的頂部和左側位置dragover 事件，如果您允許拖動的位不是需要移動的整個元素，這很有用.
Here's one I prepared earlier. For bonus points you can update the top and left position of the element in the dragover event, this is useful if the bit you're allowing to be dragged isn't the whole element that needs to be moved.
這篇關于HTML5拖放以將div移動到屏幕上的任何位置?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！