[javascript] 드래그 앤 드롭 기능을 가진 웹 기반 이미지 편집기 예제 구현하기

29 Nov 2023

javascript

드래그 앤 드롭은 사용자가 웹 페이지 상에서 요소를 드래그하여 다른 위치로 이동시키는 기능을 말합니다. 이번 예제에서는 웹 기반 이미지 편집기에서의 드래그 앤 드롭 기능을 구현해보겠습니다.

1. HTML 마크업

먼저, 다음과 같이 간단한 HTML 마크업을 작성해주세요.

<!DOCTYPE html>
<html>
<head>
  <title>이미지 편집기</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="canvas">
    <img src="image.jpg" id="image" draggable="true">
  </div>

  <script src="script.js"></script>
</body>
</html>

위의 코드에서는 이미지를 담을 canvas라는 id를 가진 div 요소와, 드래그 가능한 이미지를 나타내는 img 요소를 정의했습니다. script.js 파일에는 드래그 앤 드롭 기능을 구현할 자바스크립트 코드를 작성하겠습니다.

2. 자바스크립트 코드 구현

// script.js 파일 내용

const canvas = document.querySelector('#canvas');
const image = document.querySelector('#image');

let dragging = false;
let dragStartX, dragStartY;

image.addEventListener('dragstart', (e) => {
  e.preventDefault();
});

image.addEventListener('mousedown', (e) => {
  dragging = true;
  dragStartX = e.clientX - image.offsetLeft;
  dragStartY = e.clientY - image.offsetTop;
});

canvas.addEventListener('mousemove', (e) => {
  if (dragging) {
    image.style.left = e.clientX - dragStartX + 'px';
    image.style.top = e.clientY - dragStartY + 'px';
  }
});

canvas.addEventListener('mouseup', () => {
  dragging = false;
});

위의 자바스크립트 코드에서는 다음과 같은 동작을 구현하였습니다.

dragstart 이벤트를 막아 기본 드래그 앤 드롭 동작을 방지합니다.
mousedown 이벤트에서 드래그가 시작된 위치를 저장합니다.
mousemove 이벤트에서 드래그 중인 경우, 이미지를 드래그된 위치로 이동시킵니다.
mouseup 이벤트에서 드래그가 종료됩니다.

3. CSS 스타일링

마지막으로, styles.css 파일을 다음과 같이 작성하여 이미지와 캔버스를 스타일링해주세요.

#canvas {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

#image {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 150px;
  top: 150px;
}

위의 코드에서는 canvas 내부의 image 요소를 절대적인 위치로 배치하고 크기를 지정하였습니다. canvas 요소는 상대적인 위치로 배치되며, 크기와 테두리가 설정되었습니다.

결론

위의 예제를 통해 자바스크립트와 CSS를 사용하여 드래그 앤 드롭 기능을 가진 웹 기반 이미지 편집기를 구현하는 방법을 배웠습니다. 이 예제를 기반으로 원하는 기능을 추가하고 디자인을 변경하여 다양한 이미지 편집기를 만들어볼 수 있습니다.

더 자세한 내용은 다음 문서를 참고하세요.