2021.04.13 오늘의 커밋. 크롬에서 dragEnter 이슈

캘린더에 스케줄 영역을 드래그하여 날짜에 올리면

해당 날짜로 스케줄의 기간을 변경하는 기능

 

을 구현하던 도중 이슈가 발생했다.

 

드래그 하는 즉시 이상한 날짜로 이동한 것이다.

 

확인을 해보니 제한적인 상황에서만 해당 문제가 발생하고 있음을 확인했다.

결함 내용 : display:grid인 element에 dragEnter, dragLevae는 제대로 동작하지 않는다.

1. 윈도우 운영체제에서만 해당 현상 발생

2. 크롬기반 브라우저에서만 해당 현상 발생

3. 디스플레이 -> 배율 및 레이아웃이 125%일때만 발생(일반적으로 노트북에서는 125%가 디폴트다)

 

 

날짜 영역에 dragEnter, dragLeave 이벤트가 걸려있고

스케줄(grid) 영역에 dragStart, dragEnd 이벤트가 걸려있다

 

스케줄 영역을 드래그해서 날짜 영역에 드랍하면

이벤트 순서는 아래와 같다.

 

스케줄 영역을 드래그 하고 날짜 영역에 드랍하지 않고 그냥 놓으면

이벤트 순서는 아래와 같다.

 

 

하지만 크롬 + 윈도우 + 디스플레이 배율 및 레이아웃 125%인 경우

스케줄 영역을 드래그 하고 날짜 영역에 드랍하지 않고 그냥 놓으면

이벤트 순서가 아래와 같다.

 

 

 

 

아무래도 브라우저 자체적인 버그로 보이는데,

 

우선 이 문제를 해결하기 위해서는 dragEnter, dragLeave를 td가 아니라 td 하위에 넣어주면 해결이 되긴 한다.

 <header>
   <style>
            table {
                width:100%;
            }
            table td{
                border: solid 1px;
            }
            .dragObj {
                text-align:center;
				
            }
			#test {
				width:100%;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr;
			}
			#schedule_grid_start1 {
				width:100%;
				grid-column-start: 1;
				grid-column-end: 3;
			}
			#schedule_grid_start2 {
				width:100%;
				grid-column-start: 3;
				grid-column-end: 5;
			}
			#schedule_grid_start3 {
				width:100%;
				grid-column-start: 5;
				grid-column-end: 7;
			}
   </style>
        <div class="title">
            <h3>드래그 샘플</h3>
        </div>
	<script>
		function dragEvent(event) {
		  console.log(event.type)
		}
	</script>
    </header>
    <main id="content">
        <table>
            <tbody>
              
                <tr>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">1</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">2</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">3</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">4</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">5</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">6</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">7</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">8</td>
                    <td ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">9</td>
                </tr>
                <tr>
                    <td colspan=9>
                        <div id="test"
						>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start1">1</div>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start2">2</div>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start3">3</div>
						</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </main>

이것이 문제의 소스

크롬 + 윈도우 + 125%일때 dragenter가 이상하게 발생하는 그 소스다.

 

 <header>
   <style>
            table {
                width:100%;
            }
            table td{
                border: solid 1px;
            }
            .dragObj {
                text-align:center;
				
            }
			#test {
				width:100%;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr;
			}
			#schedule_grid_start1 {
				width:100%;
				grid-column-start: 1;
				grid-column-end: 3;
			}
			#schedule_grid_start2 {
				width:100%;
				grid-column-start: 3;
				grid-column-end: 5;
			}
			#schedule_grid_start3 {
				width:100%;
				grid-column-start: 5;
				grid-column-end: 7;
			}
   </style>
        <div class="title">
            <h3>드래그 샘플</h3>
        </div>
	<script>
		function dragEvent(event) {
		  console.log(event.type)
		}
	</script>
    </header>
    <main id="content">
        <table>
            <tbody>
              
                <tr>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">1</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">2</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">3</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">4</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">5</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">6</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">7</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">8</span></td>
                    <td> <span ondragleave="dragEvent(event)" ondragenter="dragEvent(event)">9</span></td>
                </tr>
                <tr>
                    <td colspan=9>
                        <div id="test"
						>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start1">1</div>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start2">2</div>
                            <div ondragstart="dragEvent(event)" 
							ondragend="dragEvent(event)" 
							draggable=true 
							class="dragObj"
							id="schedule_grid_start3">3</div>
						</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </main>

그리고 이것이 개선된 소스다.

별거없고 그냥 span을 하위에 추가해주었을뿐이다.

 

오늘은 회사에서 하루종일 이 문제의 원인과 해결방법에 대하여 고민했다.