HTML5 기본 드래그 앤 드롭 작업 예제 설명

이 글은 주로 Html5의 기본 드래그 앤 드롭 동작에 대한 자세한 설명을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

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

1. 드래그 프로세스

1.1 드래그 이벤트

마우스를 누른 채 드래그 가능한 요소를 드래그하면 다음 순서로 실행됩니다.

dragstart ->

1. dragstart: 마우스를 누르고 드래그를 시작할 때 트리거됨(한 번 트리거됨)

2. drag: 마우스를 누르고 드래그하는 동안 트리거됨(계속 트리거됨)

3. dragend: 마우스를 놓은 후 트리거됨(둘 중 하나) 요소가 유효한 배치 대상 또는 잘못된 배치 대상에 배치되었습니다.)

1.2 배치 이벤트

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

dragenter -> ; -> drop

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

dragover: Dragenter 다음에 드래그오버 이벤트가 따르며 드래그된 요소는 여전히 드롭 대상에 있습니다. 범위 내에서 움직일 때 계속 트리거됩니다.
dragleave: 요소를 드롭 대상 밖으로 드래그하면 dragleave가 트리거됩니다.
drop: 드래그된 요소가 대상 요소에 배치되면 트리거됩니다.

1.3 전체 이벤트 흐름

시작부터 요소를 드래그하여 대상에 요소를 배치합니다. 영역은 다음 순서로 트리거됩니다

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

2 . 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>
    $(&#39;.canDrog > li&#39;).bind(&#39;dragstart&#39;,function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",&#39;1&#39;);
    });
</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>
    $(&#39;.canDrog > li&#39;).bind(&#39;dragstart&#39;,function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",&#39;1&#39;);
    });
    //google chrome,opera需要添加
    $(".dataTbl").bind("dragover",&#39;td&#39;,function(e){  
        e.originalEvent.preventDefault();  
    })  
</script>

4. Firefox가 탭을 배치할 때 새 탭을 여는 문제를 해결합니다.

Firefox를 사용할 때 드래그된 요소가 해제되면 기본값 브라우저는 아래와 같이 새 탭을 엽니다.

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

<script>
    //将元素释放到当前元素中
    $(&#39;.dataTbl&#39;).bind(&#39;drop&#39;,&#39;td&#39;,function(event){
        console.log(&#39;+++drop&#39;);
        event.preventDefault();
        event.stopPropagation();
    });
</script>

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

5. 완전한 작은 예제 작성

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

그런 다음 vuedraggable 플러그인 라이브러리에 대해 알아보고 적용해 보겠습니다. vue 프레임워크

관련 권장 사항:

H5에서 드래그 앤 드롭 효과를 만드는 방법

Bootstrap Modal 드래그 앤 드롭 방법 예제 추가

JS에서 구현한 간단한 드래그 앤 드롭 장바구니 기능

위 내용은 HTML5 기본 드래그 앤 드롭 작업 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!