iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
Modern Web

JavaScript 30實作心得筆記系列 第 27

Day27 Click and Drag to Scroll

Day27 Click and Drag to Scroll

第27天的實作目標是做出在頁面元素可以拖拉並移動該元素。

  <div class="items">
    <div class="item item1">01</div>
        。
    <div class="item item25">25</div>
  </div>

建立四個事件為按下mousedown、放開點擊mouseup、離開元素mouseleave、移動mousemove

const slider = document.querySelector('.items')

slider.addEventListener('mousedown', (e) =>{})
slider.addEventListener('mouseup', () =>{})
slider.addEventListener('mouseleave', () =>{})
slider.addEventListener('mousemove', (e) =>{})

mouseupmouseleave事件中有旗標isDown是設為false,並在移除CSSactive類別。

isDown = false
slider.classList.remove('active')
.items.active {
  background: rgba(255,255,255,0.3);
  cursor: grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1);
}

mousedown事件觸發時,要讓旗幟isDowntrue,讓點擊元素加入CSS類別active,抓取滑鼠在元素中的位置,抓取元素向左移動值。

作者是透過的startX = e.pageX - slider.offsetLeft;方式來取得滑鼠在元素中的位置,但該數值也可是e.clientX的值,原因為點擊元素時,元素的寬度跟可視畫面寬度一樣大小,因此可以透過e.clientX來抓取。

isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
// startX = e.clientX得值
scrollLeft = slider.scrollLeft;

接下來為當滑鼠在元素上移動的事件mousemove,在移動事件中要判斷isDown來進行動作。

接下來取得滑鼠在元素中的位置e.pageX - slider.offsetLeft;,並將目前取得的滑鼠位置與mousedown事件取得的滑鼠位置相減,計算出水平位移。當滑鼠向左移會取得負值,向右移會取得正值,將取得數值與mousedown事件取得的元素左邊位移數值相減,取的目前位移多少。

if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1;
slider.scrollLeft = scrollLeft - walk;

Html

  <div class="items">
    <div class="item item1">01</div>
    <div class="item item2">02</div>
    <div class="item item3">03</div>
    <div class="item item4">04</div>
    <div class="item item5">05</div>
    <div class="item item6">06</div>
    <div class="item item7">07</div>
    <div class="item item8">08</div>
    <div class="item item9">09</div>
    <div class="item item10">10</div>
    <div class="item item11">11</div>
    <div class="item item12">12</div>
    <div class="item item13">13</div>
    <div class="item item14">14</div>
    <div class="item item15">15</div>
    <div class="item item16">16</div>
    <div class="item item17">17</div>
    <div class="item item18">18</div>
    <div class="item item19">19</div>
    <div class="item item20">20</div>
    <div class="item item21">21</div>
    <div class="item item22">22</div>
    <div class="item item23">23</div>
    <div class="item item24">24</div>
    <div class="item item25">25</div>
  </div>

Javascript

  1. MouseEvent

    1. mousedown
      mousedown事件是當在元素上的指標設備被點擊時觸發。
    2. mouseenter
      mouseenter事件指當滑鼠移入被事件監聽的元素時觸發。
    3. mouseover
      mouseover事件指當滑鼠移入被事件監聽的元素(子元素)時觸發。

    mouseenter與mouseover的差異為,mouseover的元素(子元素)都會觸發事件,mouseenter的元素才會觸發事件。

    1. mouseleave
      mouseleave事件是當滑鼠移開被事件監聽的元素時觸發。
    2. mouseout
      mouseout事件是當滑鼠移開被事件監聽的元素(子元素)時觸發。

    mouseleave與mouseout的差異為,mouseout的元素(子元素)都會觸發事件,mouseenter的元素才會觸發事件。

    1. mousemove
      mousemove事件是當滑鼠在被事件監聽的元素上移動時觸發。
    2. mouseup
      mouseup事件是當滑鼠在被事件監聽的元素放開點擊時觸發。

CSS

  1. overflow
    overflow屬性當內容大於容器時,要如何處理。
    1. overflow-x
    2. overflow-y
/* Content is not clipped */
overflow: visible;

/* Content is clipped, with no scrollbars */
overflow: hidden;

/* Content is clipped, with scrollbars */
overflow: scroll;

/* Let the browser decide */
overflow: auto;
  1. white-space
    white-space屬性決定元素內的空白字元如何被處理。
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

  1. user-select
    user-select屬性決定元素內容是否被選取。
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
  1. cursor
    cursor為變化滑鼠的標誌
tags: MouseEvent

上一篇
Day26 Stripe Follow Along Dropdown
下一篇
Day28 Video Speed Controller UI
系列文
JavaScript 30實作心得筆記30

尚未有邦友留言

立即登入留言