Skip to main content

[JS30] Day27: Click and Drag

keywords: coordinate system, drag#

Manipulate CSS By CSS#

利用 el.classList.add/remove/toggle('<className>') 來添加、移除、切換 class:

示範 JavaScript CSS Manipulation @ Codepen

slider.classList.remove('active');
slider.classList.add('active');
slider.classList.toggle('active');

瞭解座標系統#

認識 offset, clientpage

  • offset:以該滑鼠游標所在的容器的左上角為原點(0,0),每間瀏覽器實做不同。
  • client:以瀏覽器 browser 左上角為原點(0,0)。
  • page:以 HTML Document 文件左上角為原點(0,0)。

示範 Concept of Browser Coordinate System @ Codepen

Element 可用屬性#

Element in Web API @ MDN HTMLElement in Web API @ MDN

let scrollLeft = slider.scrollLeft;
let offsetLeft = slider.offsetLeft;

監控滑鼠是否處於點擊的狀態#

const slider = document.querySelector('.items');
let isDown = false;
slider.addEventListener('mouseleave', function (e) {
isDown = false;
});
// callback function
slider.addEventListener('mousedown', function (e) {
isDown = true;
});
slider.addEventListener('mouseup', function (e) {
isDown = false;
});
slider.addEventListener('mousemove', function (e) {
if (isDown === false) {
return;
}
// 當 isDown 為真時才會執行這下面的程式內容...
});

計算滑鼠移動的位移#

let startX; // 一開始滑鼠點擊時 x 的座標值
let moveX; // 滑鼠點擊並移動時 x 的座標值
let deltaX; // 滑鼠移動了多少距離
slider.addEventListener('mousedown', function (e) {
startX = e.pageX;
});
slider.addEventListener('mousemove', function (e) {
moveX = e.pageX;
deltaX = startX - moveX;
});

成品#

Day27: Click and Drag

延伸:利用同樣的方式製作可拖拉的元素#

Click and Drag Element @ Codepen

Last updated on