특정 Dom 이나 전체 Window 에 Drag&Drop 동작을 막고 싶은경우, dragoverdrop 이벤트에 핸들러를 추가하는 방법으로 처리하는경우가 있는데, 이렇게 해도 잘 안되는 경우가 있다.

window.addEventListener('dragover', (e) => {
  e.stopPropagation();
  e.preventDefault();
}, false);

window.addEventListener('drop', (e) => {
  e.stopPropagation();
  e.preventDefault();
}, false);

이런경우에는 drag&drop 시에 drag 되는 data 를 유지하기 위해 사용되는 DataTransfer 객체값을  수정해주면 제대로 동작한다.

window.addEventListener('dragover', (e) => {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.effectAllowed = 'none';
  e.dataTransfer.dropEffect = 'none';
}, false);

window.addEventListener('drop', (e) => {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.effectAllowed = 'none';
  e.dataTransfer.dropEffect = 'none';
}, false);

위와 같이 effectAllowed 와 dropEffect 속성을 'none' 으로 수정하여 적용하면 Drag&Drop 동작이 적용되지 않는다.

  • effectAllowed
    • 드래그 효과를 제한할 수 있고, 다음과 같은 문자열 값이 사용된다.
    • none, copy, link, move, copyLink, copyMove, linkMove, all
  • dropEffect
    • 마우스를 놓았을 때 발생하는 효과

Reference


Posted by leechwin