[포스코 x 코딩온] 팀프로젝트 추가 기능(스티커?..)

해시태그를 스티커처럼 드래그앤드롭 해주는 이벤트를 넣어주고 싶어서 알아봤다.

 

mousedown -> mousemove -> mouseup 순서로 해주는거라고는 하는데

드래그 앤 드롭이 잘 먹히지 않아서...

그냥 임의로 클릭하면 마우스를 따라오는 요소를 만들어서 다시 document를 누르면 그 자리에 요소가 픽스되게 만들었다.

 

 

음.. 근데 스티커가 클릭하면 각도가 변경되게 해주고 싶은데 난수 설정이 잘 안되어서 흠 했다..

 

이것저것 구글링 해본 결과, Math.random() 에 - 0.5를 해주면 일단 음수값이 들어가고 -1, 0, 1 로 나오므로 여기에 원하는 범위를 곱해준다..

 

결과적으로 원하는 모습이 나오긴 했다만 좀더 좋은 방법은 없을까 고민된다.

 

 

근데 왜 커서에서 거리가 저렇게 먹히는지는 도저히 모르겠다...ㅋㅋㅋㅋㅋ 답답

 

const mainHash = document.querySelector('.main__hash');
const hashP = mainHash.querySelectorAll('.sticker');

let isPress = false;
let prevX = 0;
let prexY = 0;

for(let i = 0; i < hashP.length; i++) {
  hashP[i].addEventListener('mousedown', function(e){
    isPress = true;

    hashP[i].setAttribute('dragable', 'true');
    hashP[i].ondragstart = () => false;

    hashP[i].style.position = 'absolute';
    hashP[i].style.zIndex = 4;

    // 난수로 스티커마다 각도 다르게
    hashP[i].style.transform = `rotate(${Math.floor((Math.random() - 0.5) * 20)}deg)`;
    mainHash.append(hashP[i]);

      function moveAt(pageX, pageY) {
        if(isPress === false) return;

        hashP[i].style.left = pageX - hashP[i].offsetWidth/10 - 42 + 'px';
        hashP[i].style.top = pageY - hashP[i].offsetHeight/10 - 220+ 'px';
        // 왜그런지 모르겠어서 하드코딩..함
      }

      function customMouseMove (evt) {
        moveAt(evt.pageX, evt.pageY);
      }
      document.addEventListener('mousemove', customMouseMove);

      document.addEventListener('click', function(e) {
        hashP[i].style.left = e.target.left;
        hashP[i].style.top = e.target.top;
        document.removeEventListener('mousemove', customMouseMove);
        hashP[i].onmouseup = null;
      })
  });
}

일단 기능 구현이 우선이므로 이렇게 마친다 .....

 

시간이 남는다면 스티커가 여러개 클릭 되지 않게끔 추가로 구현이 필요할 것 같다.

 

 

-- 추가 수정

클릭이 아닌 드래그드롭으로 제대로 구현해냈다!

 

최종 정리본

const mainHash = document.querySelector('.main__hash');
const hashP = mainHash.querySelectorAll('.sticker');

let isPress = false;
let curTarget = null;

for(let i = 0; i < hashP.length; i++) {
  hashP[i].addEventListener('mousedown', function(e){
    curTarget = e.target;
    isPress = true;

    hashP[i].setAttribute('dragable', 'true');
    // hashP[i].ondragstart = () => false;
    hashP[i].style.position = 'absolute';

    // 난수로 스티커마다 각도 다르게
    hashP[i].style.transform = `rotate(${Math.floor((Math.random() - 0.5) * 20)}deg)`;
  });
  
  function customMouseMove (evt) {
    if(isPress === false) return;

    curTarget.style.left = evt.pageX - curTarget.offsetWidth/ 2 - 50 + 'px';
    curTarget.style.top = evt.pageY - curTarget.offsetHeight/ 2 - 130 + 'px';
  }
}

document.addEventListener('mousemove', customMouseMove);

document.addEventListener('mouseup', function() {
  isPress = false;
});

전역 변수로 현재 타겟을 미리 캐싱해두고 그 값을 사용하여 mousemove와 mouseup을 구현하면 되는 문제였다!

 

 

참고 : https://taesung1993.tistory.com/93