Html5 기본 드래그 앤 드롭 작업에 대한 자세한 설명

최근 프로젝트 개발에서는 H5의 드래그 앤 드롭 기능을 사용했습니다. 기존 프로젝트에서는 VUE 제품군 버킷을 사용하기 때문에 vuedragable 플러그인을 사용하지만 전체 프로세스가 상당히 고통스럽습니다. 그래서 나는 H5 드래그 앤 드롭의 원리를 연구하기 시작한 다음 이를 데이터 기반 프레임워크에 적용하기로 결정했습니다. H5에서 드래그 앤 드롭 작업을 구현하려면 최소한 두 단계가 필요합니다. 1) 드래그 앤 드롭하려는 객체 요소의 draggable 속성을 true로 설정합니다(img 및 a 요소는 기본적으로 드래그 앤 드롭을 허용합니다). 관련 이벤트 처리 코드를 드래그합니다. 테스트의 편의를 위해 먼저 jQuery 라이브러리를 사용하여 기본 드래그 앤 드롭 기능을 완성합니다.

마우스를 누른 상태에서 드래그 가능한 요소를 드래그하면 다음 순서로 트리거됩니다.

드래그스타트 -> 드래그 -> 드래그엔드

1. dragstart: 마우스를 누르고 드래그를 시작할 때 트리거됩니다(한 번 트리거됨).
2. 드래그: 마우스를 누른 채 드래그하는 동안 트리거됩니다(지속적으로 트리거됨).
3. dragend: 마우스를 놓은 후 트리거됩니다(요소가 유효한 배치 대상에 배치되었는지 또는 유효하지 않은 배치 대상에 배치되었는지 여부).

드래그 가능한 요소를 컨테이너로 드래그하면 다음 순서로 트리거됩니다.

dragenter -> 드래그오버 -> 드롭

dragenter: 요소를 드롭 대상으로 드래그하는 한 dragenter 이벤트가 트리거됩니다.

dragover: dragenter 뒤에는 dragover 이벤트가 따르며, 이 이벤트는 드래그된 요소가 드롭 대상 범위 내에서 계속 움직이는 동안 계속해서 트리거됩니다.

dragleave: 요소를 배치 대상 밖으로 드래그하면 dragleave가 트리거됩니다.

drop: 드래그된 요소가 대상 요소에 배치되면 실행됩니다.

요소 드래그 시작부터 대상 영역에 요소 배치까지 다음 순서로 트리거됩니다.

드래그스타트->드래그->dragenter->드래그오버->드래글레이브->드롭->드래그엔드

요소에 draggable 속성을 직접 추가하면 Chrome 및 Opera에서 직접 드래그할 수 있지만(화살표가 + 기호로 변경되는 등의 해제 작업이 없음) Firefox에서는 응답이 없습니다.

 <ul class=canDrog> <li draggable=true id=1>매우 좋음</li> <li draggable=true id=2>좋음</li> <li draggable=true id=3>보통</li> <li draggable=true id=4>나쁨</li> </ul> <script> //JS 코드 없음</script>

이 문제를 해결하려면 dragstart 이벤트 핸들러를 드래그 요소에 바인딩하고 이 함수에서 event.dataTransfer.setData 함수를 호출해야 합니다.

 <script> <ul class=canDrog> <li draggable=true id=1>매우 좋음</li> <li draggable=true id=2>좋음</li> <li draggable=true id=3>보통</li > <li draggable=true id=4>차이점</li> </ul> $('.canDrog > li').bind('dragstart',function(event){ //firefox 드래그 앤 드롭 통신에 사용되는 dataTransfer 개체에 액세스해야 합니다. event.dataTransfer.setData(Text,'1'));</script>

출시 가능한 로고는 운영 체제에 따라 다를 수 있습니다. Mac Chrome에서는 흰색 '+'가 포함된 원형 로고로 나타납니다.

해결책은 드래그오버 이벤트를 컨테이너에 바인딩하는 것입니다.

 <ul class=canDrog> <li draggable=true id=1>매우 좋음</li> <li draggable=true id=2>좋음</li> <li draggable=true id=3>보통</li> <li draggable=true id=4>차이</li> </ul> <table class=dataTbl> <thead> <tr> <th style=width: 10%>섹션/주</th> <th>월요일</th> <th>화요일</th> <th>수요일</th> <th>목요일</th> <th>금요일</th> </tr> </thead> <tbody > <tr> <td>섹션 1</td> <td draggable=true ></td> <td draggable=true ></td> <td draggable=true ></td> <td draggable= true >< /td> <td draggable=true ></td> </tr> <!--생략됨--> </tbody> </table><script> $('.canDrog > li').bind('dragstart',function ( event){ //firefox는 드래그 앤 드롭 통신에 사용되는 dataTransfer 개체에 액세스해야 합니다. event.dataTransfer.setData(Text,'1') }); Chrome과 Opera에서는 $(.dataTbl).bind(dragover,'td',function(e){ e.originalEvent.preventDefault(); }) </script>를 추가해야 합니다.

Firefox 사용 시 드래그한 요소를 놓으면 기본 브라우저에서는 다음과 같이 새 탭이 열립니다.

이는 브라우저가 드롭 콜백 함수 이후에 기본 동작을 실행하기 때문입니다. 일반적인 해결 방법은 기본 이벤트의 실행을 방지하고 드래그 컨테이너의 드롭 후크에서 버블링을 방지하는 코드를 추가하는 것입니다.

 <script> //요소를 현재 요소로 해제 $('.dataTbl').bind('drop','td',function(event){ console.log('++++drop'); event.preventDefault (); event.stopPropagation() });</script>

그러나 드래그 가능한 요소를 다른 위치로 드래그하면 새 탭이 열리는 문제가 계속 발생합니다. 이 경우 위 코드를 모든 컨테이너에 추가할 수 있습니다.

소스 코드: https://github.com/pluslicy/drag

나중에 vuedraggable 플러그인 라이브러리를 연구하고 이를 vue 프레임워크에 적용하겠습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.