바닐라 자바스크립트 dragger만들기

심심해서 하나 만들었다.

 

급한 사람은 아래 깃헙들어가서 전체 코드 긁어가면 된다.

https://github.com/d0422/make-toy-vanillaJS/tree/main/dragger

GitHub - d0422/make-toy-vanillaJS: 바닐라 자바스크립트로 장난감 만들기

매우 간단하게 만들어보자.

아래는 파일구조

dragger.html

걍 다 js로 하고싶어서 script와 css만 심어준다.

dragger.css

 

css다.내부 글자를 드래그 못하게 하고, 위치조정, 글자 크기 조정을 해주었다.

애니메이션을 만들어주고, 움직일때 적용할 애니메이션, 움직임이 끝났을 때 적용할 애니메이션을 작성해주었다.

 

dragger.js

const ball = document.createElement('div');
ball.appendChild(document.createTextNode('Grab Me!'));
ball.classList.add('ball');
document.body.appendChild(ball);

ball이라는 div요소를 하나 만들어주고 글자에 Grab Me!를 넣어주었다.

이렇게 만들어진 ball에 ball이라는 클래스를 심어준 뒤에 body에다가 추가했다.

 

dragger의 상태는 3가지로 나뉘게 된다.

잡았을때, 끌때, 놓았을때

잡아야지만 끌어지므로, 잡아졌다는 상태가 필요하다. 이것을 pressed라는 상태로 이름지어줬다.

let pressed = false;

눌렀을때

mouseDown 이벤트가 생기고 이때 일어나는 일들을 함수로 모았다.

function onMouseDown() {
  pressed = true; //눌러졌음
  animationManage(); //애니메이션을 처리
  stateChanger(100, 100, 'coral'); //도형의 모양을 100px, 100px, coral색상으로 변경
  onMouseMove(); //작아질때, 마우스를 따라와야 하므로
  ball.style.cursor = 'grab'; //마우스 커서 모양 변경
  ball.innerHTML = 'Grab!!'; //div안에 글자 변경
}

stateChanger와 animatinoManage는 각각 이렇게 구현해주었다.

function stateChanger(width, height, backgroundColor) {
  ball.style.backgroundColor = backgroundColor;
  ball.style.width = `${width}px`;
  ball.style.height = `${height}px`;
}

function animationManage() {
  if (pressed) {
    ball.classList.remove('animation-end');
    ball.classList.add('animation-move');
  } else {
    ball.classList.remove('animation-move');
    ball.classList.add('animation-end');
  }
}

마우스가 눌러진 채로 움직일때

얘는 일단 눌러질때만 따라 움직여야 하므로, 눌러졌는지 알아야 하고, 그 후에 마우스를 따라다니게 해야한다.

window.event안에 마우스 위치를 브라우저 창에 있는 좌표로 나타내주는 값들이 있어서 쉽게 해치웠다.

function onMouseMove() {
  if (pressed) {
    ball.style.top = window.event.pageY - 50 + 'px';
    ball.style.left = window.event.pageX - 50 + 'px';
  }
}

 

마우스에서 손을 떼었을 때

pressed를 false로 바꿔주고 후에 처리를 해준다.

function onMouseUp() {
  pressed = false;
  animationManage();
  stateChanger(200, 200, 'black');
  ball.style.cursor = 'pointer';
  ball.innerHTML = 'Grab Me';
}

 

ball에다가 EventListener를 달아주면 끝

ball.addEventListener('mousedown', onMouseDown);
ball.addEventListener('mouseup', onMouseUp);
ball.addEventListener('mousemove', onMouseMove);