[JS作品]JS30系列27 - Click and Drag

Post author:Steven玄
Post last modified:2020 年 12 月 12 日
Post category:FrontEnd / JavaScript / Software Engineering
Post comments:0 Comments

主題目標

拖拉畫面的時候等於移動卷軸，以達到移動的目的。

作品網址：

Demo作品連結

JavaScript 30 作品目錄

處理步驟

步驟一：

滑鼠點擊的時候，有樣式變換，離開畫面或是按鍵放開就樣式還原，建立 mousedown 、 mouseup 、 mouseleave 等事件，並切換樣式。

  // 宣告
  const slider = document.querySelector(".items");
  
  /**
 * 移除樣式
 */
function handleRemoveActive() {
  slider.classList.remove("active");
}
/**
 * 滑鼠按鍵按下
 * @param {*} e
 */
function handleMouseDown(e) {
  slider.classList.add("active");
}
  //滑鼠按下
  slider.addEventListener('mousedown',handleMouseDown);
  //滑鼠離開
  slider.addEventListener('mouseleave',handleRemoveActive);
  //滑鼠鬆開
  slider.addEventListener('mouseup',handleRemoveActive);

步驟二：

建立滑鼠移動的事件，並判斷滑鼠左鍵未點選時返回。

  /**
 * 移動事件
 * @param {*} e window.event
 */
function handleMove(e){
  // 判斷滑鼠左鍵點選，未點選直接返回停止
  if(e.buttons !== 1) return;
}
  //滑鼠移動
  slider.addEventListener('mousemove',handleMove);

步驟三：

宣告變數 startX 紀錄滑鼠目前的 X 軸位置，以及 scrollLeft 卷軸目前的位置；接著計算移動距離與設定

  // 宣告 紀錄滑鼠點擊的起始位置
  let startX;
  // 宣告 紀錄卷軸左邊位置
  let scrollLeft;


/**
 * 滑鼠按鍵按下
 * @param {*} e
 */
function handleMouseDown(e) {
  slider.classList.add("active");
  //設定起始位置
  startX = e.pageX - slider.offsetLeft;
  //記錄卷軸目前位置
  scrollLeft = slider.scrollLeft;
}

  /**
 * 移動事件
 * @param {*} e window.event
 */
function handleMove(e){
  // 判斷滑鼠左鍵點選，未點選直接返回停止
  if(e.buttons !== 1) return;
  // 移動距離 剪掉相對距離 和初始距離
  walk = e.pageX - slider.offsetLeft - startX;
  // 卷軸設定位置
  slider.scrollLeft = scrollLeft -walk;
}