cross browser html5 drag and drop

html5 drag and drop 문제점

1. drop 영역 인식

ul (drop)/ li (drag) 구조에서 ul 에 margin 값이 있을 경우
drag and drop 동작할 때

이로 인해 발생하는 이슈

dragLeave 일 때 ul 영역 안에 있으면 placeholder 유지가 되기 때문에
ie 에서는 ul 과 li 사이의 ul margin 공간에 drop 하면
placeholder 가 사라지지 않음.

해결

아직 정확히 해결된 이유를 모르겠음.

$(document.body).bind('dragover', function(e) {
  e.preventDefault();
  console.log('document.body dragover');
});

$(document.body).bind('dragenter', function(e) {
  e.preventDefault();
  console.log('document.body dragenter');
});

2. drag and drop 외 영역이 select 된 상태에서 drag

select 된 모든 element 가 함께 drag 되는 것으로 보임

해결

css user-select: none 추가

chrome 과 ie 차이