Easy Widgets 플러그인 사용시 widget-header에 이미지가 있을 때 문제

이전에 작성했던 2011/10/26 – Easy Widgets를 이용한 정렬 순서 수정 포스팅에서 상품정렬 순서를 마우스드래그로
변경하도록 했었는데 이 때 테스트에서 미처 몰랐던 부분이 실제로 적용해보니 생겨서 다시 정리하고자 한다.

문제는 바로 widget-header 부분에 이미지가 나올 때 영역의 이동이 안되는 문제이다. 파이어폭스에서는 이상없이
되지만 IE에서는 이동이 되지 않는다. 처음 테스트 할 때는 텍스트만 있어서 전혀 몰랐던 문제였다. 클라이언트에게
파이어폭스만 사용하라고 할 수는 없기 때문에 문제를 해결하기 위해 여러 방법을 시도했는데.. 여러시간 삽질했다.

이미지처럼 마우스 커서가 변경 되어야 하는데.. 이미지 영역에서는 이게 되지 않는다. 그래서 생각끝에 찾은 꼼수가
바로 이미지 영역과 텍스트 영역을 모두 감싸는 별도의 widget-header 영역을 만들고 이걸 그 영역 위에 위치하도록
하는 것이었다. 그런데 이것도 문제가 단순히 투명한 영역을 위로 나타나게 한다고 해서 되는 것이 아니었다. 그래서
생각한 또 다른 방법이.. 실제로 헤더영역에 배경색을 적용해주면 이동이 되는 것에 착안을 해서 투명한 gif 이미지를
배경으로 깔아주는 것이다. 이렇게 하면 IE에서도 마우스 드래그로 위치를 이동시킬 수 있다. 이것때문에 몇시간을
삽질했는데.. 너무 간단하게 해결이 돼서 약간 허무했다. 그래도 문제가 해결돼서 정말 다행이다. ㅋㅋ