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) =>{})

在mouseup、mouseleave事件中有旗標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事件觸發時，要讓旗幟isDown為true，讓點擊元素加入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的元素才會觸發事件。

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

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

   6. mousemove
      mousemove事件是當滑鼠在被事件監聽的元素上移動時觸發。
   7. 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;

2. white-space
   white-space屬性決定元素內的空白字元如何被處理。

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

3. user-select
   user-select屬性決定元素內容是否被選取。

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

4. cursor
   cursor為變化滑鼠的標誌

tags: MouseEvent