[javascript] 콘텍스트 메뉴를 사용한 드래그 앤 드롭 기능 개발하기

11 Dec 2023

javascript

웹 애플리케이션에서 콘텍스트 메뉴를 사용하여 드래그 앤 드롭 기능을 제작할 수 있습니다. 이 기능을 통해 사용자가 요소를 드래그한 후 특정 지점에 놓을 때 나타나는 옵션 메뉴를 커스터마이징할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 콘텍스트 메뉴를 만들고, 드래그한 요소를 해당 메뉴에 놓았을 때의 액션을 정의하는 방법에 대해 알아보겠습니다.

콘텍스트 메뉴와 드래그 앤 드롭 구현하기

우선 HTML, CSS, JavaScript를 사용하여 콘텍스트 메뉴와 드래그 앤 드롭을 구현해보겠습니다.

HTML

<div id="draggable" draggable="true">드래그할 요소</div>
<div id="context-menu" style="display: none;">
  <ul>
    <li id="option1">옵션 1</li>
    <li id="option2">옵션 2</li>
  </ul>
</div>

CSS

#draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  cursor: move;
}

#context-menu {
  position: absolute;
  z-index: 100;
  background-color: #fff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

JavaScript

const draggable = document.getElementById('draggable');
const contextMenu = document.getElementById('context-menu');

draggable.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text', e.target.id);
});

contextMenu.addEventListener('dragover', function(e) {
  e.preventDefault();
});

contextMenu.addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text');
  const draggableElement = document.getElementById(data);
  if (e.target.id === 'option1') {
    // 옵션 1 액션 정의
  } else if (e.target.id === 'option2') {
    // 옵션 2 액션 정의
  }
});

결론

이제 콘텍스트 메뉴와 드래그 앤 드롭 기능을 함께 사용할 수 있는 웹 애플리케이션을 만들었습니다. 사용자가 요소를 드래그한 후, 적절한 옵션을 선택할 수 있도록 콘텍스트 메뉴를 추가했습니다. 이러한 기능은 사용자 경험을 개선하고 업무 효율성을 높일 수 있는 유용한 기능입니다.

더 많은 자세한 내용은 링크를 참조하세요.