跳至主要内容

[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, client 和 page

  • 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