JS 實現(xiàn) div 自由拖拽
當(dāng)前位置:點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
實現(xiàn)鼠標(biāo)可以自由拖拽頁面中的元素(比如div,圖片等),首先為要拖動的元素設(shè)置 css 為絕對定位(或者使用transform,但使用絕對定位更常見),然后需要用到三個事件:mousedown, mousemove 和 mouseup。 實現(xiàn)思路: a) 頁面中添加一個div,作為容器,容易的class 設(shè)置為 container,并將其設(shè)置為相對定位; b) 在 container 中添加一個div,作為拖拽的目標(biāo),并將其設(shè)置為絕對定位; c) 給推拽目標(biāo)添加 mousedown 事件,mousedown 事件記錄鼠標(biāo)按下的坐標(biāo); d) mousedown 函數(shù)中,注冊 mousemove 和 mouseup 事件; e) mousemove 事件中,記錄鼠標(biāo)坐標(biāo),并與mousedown事件的起始坐標(biāo)計算,得出移動的距離,根據(jù)這個距離重新給拖拽目標(biāo)設(shè)置定位; f) mouseup 事件中取消 mousemove、mouseup 事件。 具體實現(xiàn) HTML
CSS
JS
? 閱讀原文:原文鏈接 該文章在 2025/7/1 23:26:34 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |