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