[javascript] Draggable 플러그인을 사용하여 웹 페이지에서 드래그 앤 드롭 기능 추가하기

29 Nov 2023

javascript

웹 페이지에서 드래그 앤 드롭 기능을 구현하기 위해 jQuery Draggable 플러그인을 사용할 수 있습니다. 이 플러그인은 원하는 요소를 마우스로 드래그하여 다른 위치로 이동시킬 수 있게 해줍니다.

1. Draggable 플러그인 다운로드

먼저, Draggable 플러그인을 다운로드합니다. 아래 링크에서 최신 버전의 jQuery Draggable 플러그인을 다운로드할 수 있습니다.

Draggable 플러그인 다운로드 링크

다운로드한 파일은 웹 페이지에 포함해야 합니다.

2. HTML 마크업 준비

드래그 앤 드롭을 적용할 요소를 선택해야 합니다. 일반적으로 <div> 요소를 사용하지만, 다른 요소도 사용할 수 있습니다.

<div class="draggable-element">드래그 앤 드롭 기능을 추가할 요소</div>

3. JavaScript 코드 작성

Draggable 플러그인을 사용하기 위해 JavaScript 코드를 작성해야 합니다. 아래 코드는 .draggable-element 클래스를 가진 요소에 드래그 앤 드롭 기능을 추가하는 예시입니다.

$(document).ready(function() {
  $(".draggable-element").draggable();
});

위 코드는 문서가 준비되면(ready 이벤트가 발생하면) .draggable-element 클래스를 가진 요소에 Draggable 플러그인을 적용합니다.

4. 스타일링

드래그 앤 드롭 요소의 스타일링은 CSS를 사용하여 처리할 수 있습니다. 예를 들어, 드래그되는 요소에 대해 배경색을 변경하고 테두리를 추가할 수 있습니다.

.draggable-element {
  background-color: #e2e2e2;
  border: 1px solid #ccc;
  padding: 10px;
}

위 CSS 코드는 .draggable-element 클래스를 가진 요소의 배경색을 #e2e2e2로 설정하고, 테두리를 1px의 #ccc 색상으로 추가하며, 안쪽 여백을 10px로 설정합니다.

5. 웹 페이지에 적용

위의 단계를 모두 완료한 후, HTML 파일에 Draggable 플러그인을 적용한 요소와 스타일링된 CSS 코드를 포함해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="jquery-ui.css">
  <style>
    .draggable-element {
      background-color: #e2e2e2;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="draggable-element">드래그 앤 드롭 기능을 추가할 요소</div>

  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <script>
    $(document).ready(function() {
      $(".draggable-element").draggable();
    });
  </script>
</body>
</html>

위 코드를 웹 브라우저에서 실행하면, .draggable-element 클래스를 가진 요소가 드래그 앤 드롭이 가능한 상태가 됩니다.

더 자세한 사용법과 기능에 대한 내용은 jQuery Draggable 플러그인 문서를 참조하시기 바랍니다.

참고 자료

jQuery Draggable 플러그인