Drag

[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] 파일 Drag & Drop 기능 구현하기

input 태그가 아닌 임의의 영역에 이벤트를 적용시켜 드래그 앤 드롭 기능을 구현해보겠습니다. 해당 기능을 구현하기 위해서는 아래의 이벤트를 사용하게 됩니다. drop - 드래그한 파일이 영역에 드롭(드래그한 객체를 놓았을 때)되었을 때 발생 dragover - 드래그한 파일이 영역에 머물러 있을 때 발생 dragenter - 드래그한 파일이 영역에 최초로 진입했을 때 발생 dragleave - 드래그한 파일이 역영에 벗어났을 때 발생 그중 drop, dragover 이벤트는 필수로 사용해야 하는 이벤트입니다. ( dragover 이벤트를 적용하지 않으면 drop 이벤트가 작동하지 않음 ) 코드 이곳에 파일을 드롭해주세요. 먼저 파일을 드롭할 영역을 만들어 줍니다. 그 후 자바스크립트 코드로 해당 태그..

[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를 늘려주는 방식입니다. 먼저 이미지..