亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

JS 實(shí)現(xiàn) div 自由拖拽

admin
2025年6月28日 23:45 本文熱度 125

實(shí)現(xiàn)鼠標(biāo)可以自由拖拽頁(yè)面中的元素(比如div,圖片等),首先為要拖動(dòng)的元素設(shè)置 css 為絕對(duì)定位(或者使用transform,但使用絕對(duì)定位更常見),然后需要用到三個(gè)事件:mousedownmousemove 和 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

<div class="container">    <div class="el"></div></div>

CSS

.container {position: relative;        width100vw;        height100vh; } el {position: absolute;        top0;        left0;        width100px;        height100px;        background: red;}

JS

var el = document.querySelector('.el');el.addEventListener('mousedown', mouseDown);var startX, startY, offsetX, offsetY;function mouseDown(e){    startX = e.clientX;    startY = e.clientY;    offsetX = el.offsetLeft//記錄原始位置    offsetY = el.offsetTop;    document.addEventListener('mousemove', mouseMove);    document.addEventListener('mouseup', mouseUp);}function mouseMove(e){    var x = e.clientX - startX;    var y = e.clientY - startY;    el.style.left = offsetX + x + 'px';    el.style.top = offsetY + y + 'px';}function mouseUp(e){    document.removeEventListener('mousemove', mouseMove);    document.removeEventListener('mouseup', mouseUp);}

?

閱讀原文:原文鏈接


該文章在 2025/7/1 23:26:34 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved