---

작성일자 : 2019-04-08

cross browser html5 drag and drop

html5 drag and drop 문제점 해결 기록

1. drop 영역 인식

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

browser	영역		drag and drop event
chrome	drag and drop	ul margin/padding 은 ul의 영역 O	dragOver
chrome	javascript	ul margin/padding 은 ul의 영역 O	dragOver
ie	drag and drop	ul margin/padding 은 ul의 영역 X	dragLeave
ie	javascript	ul margin/padding 은 ul의 영역 O	dragLeave

이로 인해 발생하는 이슈

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 차이

browser	테스트		결과
chrome	ctrl + a	select 가능한 요소 클릭 후	select 가능한 요소만 선택 가능
chrome	ctrl + a	select 불가능한 요소 클릭 후	select 가능한 요소만 선택 가능
chrome	mouse drag	select 가능한 요소부터 출발	select 가능한 요소만 선택 가능
chrome	mouse drag	select 불가능한 요소부터 출발	선택 불가능
ie	ctrl + a	select 가능한 요소 클릭 후	선택 가능
ie	ctrl + a	select 불가능한 요소 클릭 후	선택 불가능
ie	mouse drag	select 가능한 요소부터 출발	선택 가능
ie	mouse drag	select 불가능한 요소부터 출발	선택 불가능