已解決430363個問題，去搜搜看，總會有你想問的

如何拖動和變換一個盒子？

首頁猿問如何拖動和變換一個盒子？

如何拖動和變換一個盒子？

JavaScript

守著一只汪 2022-12-02 16:51:52

我正在創建一個框，我可以在其中沿頁面的 X 軸拖動它。我想把它拖放到任何地方。但是，代碼無法運行，因為e.clientX在新的點擊后值會自行重置。因此我可以拖動它，但是當我再次拖動它時，它會自動到中間。const box = document.querySelector('.box');box.addEventListener('dragstart', dragStart);box.addEventListener("drag", handleDrag);box.addEventListener("dragend", dragEnd);let startX = 0;function dragStart(e) { startX = e.clientX; console.log(startX);}function handleDrag(e) { const currentX = e.clientX; box.style.transform = 'translateX(' + (currentX - startX) + 'px)';}function dragEnd(e) { box.style.transform = 'translateX(' + (e.clientX - startX) + 'px)';}.container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;}.box { width: 250px; height: 250px; background-color: tomato;}<div class="container"> <div class="box" draggable="true"></div></div>

查看完整描述

1 回答

蠱毒傳說

TA貢獻1895條經驗獲得超3個贊

好的，我認為解決方案就在那里：

我所做的是向盒子添加一個屬性（如果你只有一個盒子，你可以只聲明一個全局變量）來存儲盒子的當前位置

const box = document.querySelector('.box');

box.addEventListener('dragstart', dragStart);

box.addEventListener("drag", handleDrag);

box.addEventListener("dragend", dragEnd);

box.currentTransform = 0; // adding this

let startX = 0;

function dragStart(e) {

startX = e.clientX;

console.log(startX);

}

function handleDrag(e) {

const currentX = e.clientX;

box.style.transform = 'translateX(' +

(box.currentTransform + currentX - startX) + // changed that

'px)';

}

function dragEnd(e) {

box.currentTransform += e.clientX - startX // added that

box.style.transform = 'translateX(' + (box.currentTransform) + 'px)'; // changed this

}

.container {

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.box {

width: 250px;

height: 250px;

background-color: tomato;

}

</div>

現在它似乎工作得很好

反對回復 2022-12-02

1 回答
0 關注
111 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何拖動和變換一個盒子？

如何拖動和變換一個盒子？

1 回答

添加回答

如何拖動和變換一個盒子？