[Javascript] Drag&Drop 을 막고싶은 경우

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

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

• https://developer.mozilla.org/ko/docs/Web/API/HTML_%EB%93%9C%EB%9E%98%EA%B7%B8_%EC%95%A4_%EB%93%9C%EB%A1%AD_API
• https://developer.mozilla.org/ko/docs/Web/API/DataTransfer
• https://help.adobe.com/ko_KR/as3/dev/WSC982AEFA-D020-41aa-8C3D-37AAEB7C132Czephyr_serranozephyr.html
• https://help.adobe.com/ko_KR/as3/dev/WSC982AEFA-D020-41aa-8C3D-37AAEB7C132Czephyr_serranozephyr.html#WS6D4680BD-2E34-44ad-9BFD-29DDE0DDB3EBzephyr_serranozephyr