[JS/CSS] 드래그와 터치되는 캐러셀 만들기 (1)

HTML

 <!-- 스와이프 슬라이드메뉴 -->
        <div class="swiper-wrapper">
          <div class="swiper-container">
            <div class="swiper-slide"><img src="img/swiper-1.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-2.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-3.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-4.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-5.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-6.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-7.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-8.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-9.jpg" /></div>
            <div class="swiper-slide"><img src="img/swiper-10.jpg" /></div>
          </div>
        </div>

수정전 CSS

// 많은 상품 스와이프
.swiper-wrapper {
  // flex-wrap: wrap;  이걸 사용하면 아이템들이 컨테이너의 너비를 초과할 경우 다음 줄로 넘어가게 됨
  overflow: hidden;
  .swiper-container {
    display: flex;
    width: 100vw;
    justify-content: space-around;
  }
  .swiper-slide {
    // flex: 0 0 auto;
    img {
      width: 20vw;
      height: 20vw;
    }
  }
}

---

e.clientX 의 사용

마우스의 좌표 알고 싶을 때 - e.clientX
= 현재 마우스의 좌표 출력

$(".swiper-slide")
  .eq(0)
  .on("mousemove", function (e) {
    console.log(e.clientX); //마우스의 좌표 알려줌.
  });

왼쪽으로 갈 수록 0 에 가까워짐

오른쪽으로 갈 수록 숫자가 커짐.

 

mousemove 리스너에 달아 놨기 때문에

마우스 움직일 때마다 마우스 좌표 잘 알려줌. 

= 유저가 얼마나 사진을 드래그 했는지 그런 것도 알 수 있다.

 

e.clientX 의 사용 목적과 콜백함수 안에 들은 e 파라미터 의 의미.

e 파라미터의 의미

e는 이벤트 객체(event object)입니다.

마우스 이벤트(예: mousedown, mousemove, mouseup)가 발생할 때

브라우저가 자동으로 이 객체를 생성하고 이벤트 핸들러 함수에 전달합니다.

이 객체에는 이벤트와 관련된 다양한 정보가 포함되어 있습니다.

이벤트 객체(e)란?

웹 페이지에서 어떤 일이 발생할 때(예: 클릭, 마우스 이동, 키보드 입력 등)

브라우저는 이를 감지하고 처리해야 합니다. 이러한 일을 "이벤트"라고 합니다.

이벤트가 발생할 때마다 브라우저는 해당 이벤트에 대한 정보를 담은 객체를 생성합니다.

이 객체를 "이벤트 객체"라고 부릅니다.

e 파라미터

e는 이벤트 객체를 가리키는 변수 이름입니다.

이벤트 핸들러 함수가 호출될 때 이 객체가 함수의 인자로 전달됩니다.

이벤트 객체에는 다양한 정보와 속성이 포함되어 있어서, 이벤트가 어떻게 발생했는지,

어떤 요소에서 발생했는지, 마우스의 위치는 어디인지 등의 세부 정보를 알 수 있습니다.

이벤트 객체가 왜 중요한가?

이벤트 객체는 이벤트 핸들러 함수가 이벤트에 대한 세부 정보를 얻고,

이를 바탕으로 적절한 처리를 할 수 있도록 도와줍니다.

예를 들어, 클릭된 위치, 키보드 입력 값, 마우스의 현재 위치 등을 알 수 있습니다.

e.clientX의 의미

e.clientX는 마우스 이벤트가 발생한 시점의 마우스 포인터의 X 좌표를 나타냅니다.

이 값은 브라우저의 클라이언트 영역(즉, 페이지의 좌측 상단 모서리)을 기준으로 합니다.

사용 목적

e.clientX를 사용하면 마우스 포인터의 위치를 정확히 알 수 있습니다.

이를 통해 드래그 앤 드롭 기능이나 마우스를 이용한 다른 인터랙션을 구현할 때 유용합니다.

---

mouse 이벤트

 

mousedown (어떤 요소에 마우스버튼 눌렀을 때)

mouseup (어떤 요소에 마우스버튼 뗐을 때)

mousemove (어떤 요소위에서 마우스 이동할 때)

---

mousedown 이벤트

• 발생 시점: 사용자가 마우스 버튼을 눌렀을 때 발생합니다.
• 주요 용도: 드래그 동작을 시작하거나 클릭 이벤트를 처리할 때 주로 사용됩니다.

예를 들어, 드래그 앤 드롭 기능을 구현할 때, 사용자가 마우스 버튼을 누르는 순간(mousedown)

드래그 동작을 시작한다고 알릴 수 있습니다.

 

mousemove 이벤트

• 발생 시점: 마우스 포인터가 움직일 때마다 지속적으로 발생합니다.
• 주요 용도: 마우스 포인터의 움직임을 추적하거나 드래그 동작 중 마우스의 위치를 업데이트할 때 사용됩니다.

드래그 앤 드롭 기능을 계속해서 업데이트하려면,

사용자가 마우스 버튼을 누른 상태에서 마우스를 움직일 때(mousemove)

마우스 위치를 지속적으로 추적하여 UI 요소를 이동시킬 수 있습니다.

---

마우스 드래그 이동 거리 파악하기

 

변수에 저장해서 빼보기.

함수 (시작좌표를) 전역변수로 빼서

* 전역변수 = 모든함수에서 갖다 쓸 수 있게 바깥에 만들어 놓는 것.

 

var 시작좌표 = e.clientX

// 많은 상품 스와이프
var 시작좌표 = 0;
$(".swiper-slide")
  .eq(0)
  .on("mousedown", function (e) {
    시작좌표 = e.clientX;
  });

$(".swiper-slide")
  .eq(0)
  .on("mousemove", function (e) {
    console.log(시작좌표 - e.clientX);
  });

mousedown 하고 mousemove를 사용한 이유

// 많은 상품 스와이프
var 시작좌표 = 0;
$(".swiper-slide")
  .eq(0)
  .on("mousedown", function (e) {
    console.log((시작좌표 = e.clientX));
  });

// $(".swiper-slide")
//   .eq(0)
//   .on("mousemove", function (e) {
//     console.log(시작좌표 - e.clientX);
//   });

사용자가 첫 번째 슬라이드를 클릭한 후

마우스를 움직일 때 슬라이드의 움직임을 추적하기 위해서.

mousedown 이벤트

• 발생 시점: 사용자가 마우스 버튼을 눌렀을 때.
• 이벤트 처리 목적:
  • 시작 좌표 설정: 드래그 동작을 시작하는 시점에서 마우스의 X 좌표를 저장합니다. 이를 통해 드래그 시작 위치를 기준으로 마우스가 얼마나 이동했는지를 계산할 수 있습니다.

mousemove 이벤트

• 발생 시점: 마우스 포인터가 움직일 때마다.
• 이벤트 처리 목적:
  • 이동 거리 계산: mousedown 이벤트에서 저장한 시작 좌표와 현재 마우스의 X 좌표를 비교하여 마우스가 얼마나 이동했는지를 계산합니다.
  • 드래그 동작 추적: 마우스가 움직이는 동안 이동한 거리를 콘솔에 출력하여, 나중에 이 값을 사용해 슬라이드를 실제로 움직일 수 있습니다.

코드 설명

1. mousedown 이벤트:
   • 사용자가 첫 번째 슬라이드를 클릭하면 mousedown 이벤트가 발생합니다.
   • 이 시점에서 드래그 시작 좌표(시작좌표)를 e.clientX 값으로 저장합니다.
   • e.clientX는 마우스 포인터의 X 좌표를 나타냅니다.
2. mousemove 이벤트:
   • 사용자가 마우스를 움직이면 mousemove 이벤트가 발생합니다.
   • mousedown 이벤트에서 저장한 시작 좌표와 현재 마우스의 X 좌표(e.clientX)를 비교하여 마우스의 이동 거리를 계산합니다.
   • 이 이동 거리(시작좌표 - e.clientX)를 콘솔에 출력합니다.

---

전역변수에 대해서

<script>
  var 시작좌표 = 0;

  $('.slide-box').eq(0).on('mousedown', function(e){
    시작좌표 = e.clientX;
  });

  $('.slide-box').eq(0).on('mousemove', function(e){
    console.log(e.clientX - 시작좌표)
  });
</script>

전역변수의 의미와 사용 
( 지역변수와 차이 )

 

• 전역 변수 (Global Variable):
  • 전역 변수는 코드 전체에서 접근할 수 있는 변수입니다.
  • 자바스크립트에서는 함수 밖에서 선언된 변수는 모두 전역 변수로 간주됩니다.
  • 전역 변수는 웹 페이지의 모든 스크립트에서 접근할 수 있기 때문에 실수로 값을 변경하거나 덮어쓰는 일이 발생할 수 있습니다.
• 지역 변수 (Local Variable):
  • 지역 변수는 특정 코드 블록(주로 함수) 안에서만 접근할 수 있는 변수입니다.
  • 지역 변수는 함수가 실행될 때 생성되고, 함수가 끝나면 사라집니다.
  • 이런 변수는 함수 내부에서만 접근할 수 있기 때문에 함수 밖에서는 사용할 수 없습니다.

 

• mousedown 이벤트 핸들러에서 시작좌표에 값을 저장합니다.
• mousemove 이벤트 핸들러에서 시작좌표를 사용하여 현재 마우스 위치와의 차이를 계산합니다.

 

 

mousemove 이벤트에서 시작좌표가 의미하는 것. 
= 의문) 시작좌표가 0인데 0을 빼는 건가?

<script>
  var 시작좌표 = 0;

  $('.slide-box').eq(0).on('mousedown', function(e){
    시작좌표 = e.clientX;
  });

  $('.slide-box').eq(0).on('mousemove', function(e){
    console.log(e.clientX - 시작좌표);
  });
</script>

여기서 var 시작좌표 = 0;는 초기 값을 0으로 설정하는 것입니다.

즉, 처음에는 시작좌표가 0을 가집니다. 하지만 이것은 변수가 선언될 때의 초기 값일 뿐이고,

나중에 이 변수의 값을 변경할 수 있습니다.

$('.slide-box').eq(0).on('mousedown', function(e){
  시작좌표 = e.clientX;
});

이 부분은 사용자가 .slide-box 요소를 마우스로 누를 때 실행됩니다.

mousedown 이벤트가 발생할 때, e.clientX는 마우스를 누른 지점의 X 좌표를 의미합니다.

이 좌표 값을 시작좌표 변수에 저장합니다.

즉, 마우스를 눌렀을 때의 X 좌표가 시작좌표가 되는 것입니다.

$('.slide-box').eq(0).on('mousemove', function(e){
  console.log(e.clientX - 시작좌표);
});

이 부분은 사용자가 마우스를 움직일 때 실행됩니다.

e.clientX는 마우스를 움직이는 현재 지점의 X 좌표를 의미합니다.

여기서 e.clientX - 시작좌표는 마우스를 누른 지점(시작좌표)과

현재 마우스 위치(e.clientX)( 드래그하면서 이동한 현재 마우스 위치 ) 사이의 거리를 계산하는 것입니다.

---

 

• 처음에 var 시작좌표 = 0;라고 선언합니다. 초기값은 0이지만, 이것은 이후에 변경될 수 있습니다.
• 사용자가 .slide-box를 클릭하여 mousedown 이벤트가 발생하면,
• 시작좌표는 e.clientX 값으로 변경됩니다. 예를 들어, 사용자가 X 좌표 100에서 클릭했다면 시작좌표는 100이 됩니다.
• 사용자가 마우스를 움직이면 mousemove 이벤트가 발생합니다.
• 이 때 e.clientX는 현재 마우스의 X 좌표입니다.
• 예를 들어, 현재 X 좌표가 150이라면, e.clientX - 시작좌표는 150 - 100이 되어 50이 됩니다.
• 이는 사용자가 클릭한 위치에서 50만큼 오른쪽으로 움직였음을 의미합니다.

 

---

전체 흐름 다시 보기

1. 초기 상태: var 시작좌표 = 0;
   • 시작좌표의 값은 0입니다.
2. 사용자가 .slide-box를 클릭: mousedown 이벤트 발생
   • 예를 들어, 사용자가 X 좌표 200에서 클릭했다고 가정합니다.
   • 시작좌표 = e.clientX이 실행되고, 시작좌표의 값은 200이 됩니다.
3. 사용자가 마우스를 움직임: mousemove 이벤트 발생
   • 예를 들어, 현재 마우스 위치가 X 좌표 250이라고 가정합니다.
   • e.clientX - 시작좌표는 250 - 200이 되어, 결과는 50입니다.
   • 이 값이 console.log에 의해 출력됩니다.

---

중요한 점

• 전역 변수 시작좌표는 한 번 값이 설정되면, 그 값은 프로그램 전체에서 접근 가능하고 유지됩니다.
• mousedown 이벤트 핸들러에서 시작좌표의 값을 변경하면,
• 이 변경된 값은 다른 이벤트 핸들러 (mousemove 등)에서도 접근할 수 있습니다.
• 따라서, mousedown 이벤트 핸들러에서 설정된 시작좌표의 값은
• mousemove 이벤트 핸들러에서 사용할 수 있습니다.

이런 식으로 전역 변수의 값이 한 번 변경되면,

그 변경된 값은 프로그램의 다른 부분에서도 접근하고 사용할 수 있기 때문에,

두 번째 함수에서도 변경된 값이 영향을 미치는 것입니다.