드래그앤드랍(Drag and Drop)구현시 IE에서 동작 안하는 문제

HTML5를 사용하여 드래그앤 드랍을 사용한 UI를 구현할 경우 모든 브라우저(크롬, 파이어폭스 등등)에서는 잘 동작하지만 IE에서 동작안하는 경우가 있어 알아보았습니다. 이때 IE(Internet Explorer)에서 나타날 수 있는 문제와 해결방법을 알아봅니다.

# IE에서 나타날 수 있는 문제

먼저 event객체의dataTransfer를 사용하는 경우 setData() 메소드에서 에러가 나타날 수 있습니다. 다른 브라우저는 안나타나지만 말이죠. 해당하는 이슈를 알아보면...


위와 같이 ondragstart()라는 함수가 있는경우 setData() 메소드 수행시 에러가 발생합니다. 이때 IE에서만 나타나는 에러는 두 가지가 있을 수 있습니다.

• 1. 파라미터 format의 값이 'text'가 아닌 경우
• 2. data의 값이 text가 아닌 경우

위와 같이 에러가 나타나는 경우를 자세히 알아봅니다. 먼저 첫번째 파라미터의 format에 해당하는 값이 String인 경우에는 다른 브라우저에서는 이상없이 동작하였지만 IE에서는 반드시 'text'가 사용되어야만 에러가 나타나지 않더군요~

또한 2번의 경우 역시 에러가 나타났는데 전달되는 값이 String 타입이 아닌 경우에도 IE에서는 에러가 나타날 수 있습니다. 테스트에서는 숫자타입을 크롬에서 사용하였는데 에러가 나타나지 않았습니다.

# 마치면서

여기까지 드래그앤드랍을 사용하는 경우 IE에서 나타나는 에러를 알아보았습니다. 드래그앤드랍은 개인적으로 가장 편리한 UI 방식 중 하나라고 생각합니다. 다만 다른 환경, 브라우저에서도 이상없이 동작하려면 테스트 수행 및 과정이 간단하지 않은 것 같습니다.