HTML5 기본 드래그 앤 드롭 작업 예제 설명
- 小云云원래의
- 2018-01-15 09:57:312417검색
이 글은 주로 Html5의 기본 드래그 앤 드롭 동작에 대한 자세한 설명을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
최근 프로젝트 개발에서는 H5의 드래그 앤 드롭 기능을 사용했습니다. 기존 프로젝트에서는 VUE 제품군 버킷을 사용하기 때문에 vuedragable 플러그인을 사용하지만 전체 프로세스가 상당히 고통스럽습니다. 그래서 H5 드래그 앤 드롭의 원리를 연구하기 시작한 다음 이를 데이터 기반 프레임워크에 적용하기로 결정했습니다. H5에서 드래그 앤 드롭 작업을 구현하려면 최소한 두 단계가 필요합니다. 1) 드래그 앤 드롭하려는 객체 요소의 draggable 속성을 true로 설정합니다(img 및 a 요소는 기본적으로 드래그 앤 드롭을 허용합니다). 관련 이벤트 처리 코드를 드래그합니다. 테스트의 편의를 위해 먼저 jQuery 라이브러리를 사용하여 기본 드래그 앤 드롭 기능을 완성합니다.
1. 드래그 프로세스
1.1 드래그 이벤트
마우스를 누른 채 드래그 가능한 요소를 드래그하면 다음 순서로 실행됩니다.
dragstart ->
- dragstart: 마우스를 누르고 드래그를 시작할 때 트리거됨(한 번 트리거됨)
- drag: 마우스를 누르고 드래그하는 동안 트리거됨(계속 트리거됨)
- dragend: 마우스를 놓은 후 트리거됨(둘 중 하나) 요소가 유효한 배치 대상 또는 잘못된 배치 대상에 배치되었습니다.)
1.2 배치 이벤트
드래그 가능한 요소를 컨테이너에 드래그하면 다음 순서로 트리거됩니다.dragenter -> ; -> dropdragenter: 요소를 드롭 대상으로 드래그하는 한 dragenter 이벤트가 트리거됩니다.dragover: Dragenter 다음에 드래그오버 이벤트가 따르며 드래그된 요소는 여전히 드롭 대상에 있습니다. 범위 내에서 움직일 때 계속 트리거됩니다.
dragleave: 요소를 드롭 대상 밖으로 드래그하면 dragleave가 트리거됩니다.
drop: 드래그된 요소가 대상 요소에 배치되면 트리거됩니다.
1.3 전체 이벤트 흐름
시작부터 요소를 드래그하여 대상에 요소를 배치합니다. 영역은 다음 순서로 트리거됩니다dragstart->drag->dragenter->dragover->dragleave->drop->dragend2 . Firefox에서 드래그 앤 드롭을 지원하지 않는 문제 해결
요소에 draggable 속성을 직접 추가하면 Chrome 및 Opera에서 직접 드래그할 수 있습니다(해제 작업이 없습니다(예: +로 변경되는 화살표). sign)), 그러나 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>
3.크롬, 오페라에서 컨테이너에 요소를 드래그할 때 발생하는 문제 해결 해제 가능한 로고가 표시되는 문제
<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>第一节</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');
});
//google chrome,opera需要添加
$(".dataTbl").bind("dragover",'td',function(e){
e.originalEvent.preventDefault();
})
</script>
4. Firefox가 탭을 배치할 때 새 탭을 여는 문제를 해결합니다.
Firefox를 사용할 때 드래그된 요소가 해제되면 기본값 브라우저는 아래와 같이 새 탭을 엽니다.
<script>
//将元素释放到当前元素中
$('.dataTbl').bind('drop','td',function(event){
console.log('+++drop');
event.preventDefault();
event.stopPropagation();
});
</script>하지만 드래그 가능한 요소를 다른 위치로 드래그하면 여전히 새 탭이 열리는 문제가 발생합니다. 이 경우 위 코드를 모든 컨테이너에 추가할 수 있습니다.
5. 완전한 작은 예제 작성
Bootstrap Modal 드래그 앤 드롭 방법 예제 추가
위 내용은 HTML5 기본 드래그 앤 드롭 작업 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!