드래그

[JS] 마우스 이동 방향 판단하기

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다. 코드 See the Pen mouse movement direction by hyukson (@hyukson) on CodePen. 코드 풀이 // 이벤트 생성 window.addEventListener("mousemove", getMouseDirection); 마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다. let prevX = 0, prevY = 0; // 이전에 있던 좌표 function getMouseDirection(event) { const xDir = prevX

[JS] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[JS] 별점 드래그 구현

완성본 코드 See the Pen Drag Star by hyukson (@hyukson) on CodePen. 코드 풀이 ★★★★★ ★★★★★ // JAVASCRIPT CODE const drawStar = (target) => { document.querySelector(`.star span`).style.width = `${target.value * 10}%`; } // JQUERY CODE const drawStar = (target) => { $(`.star span`).css({ width: `${target.value * 10}%` }); } 별점 뒤에 숨겨진 input range의 값을 드래그로 조절할 수 있습니다. 해당하는 value값만큼 별 width를 늘려주는 방식입니다. 먼저 이미지..