API를 통한 드래그 앤 드롭 정렬 구현에 대한 HTML5 튜토리얼

HTML5는 드래그 앤 드롭 효과를 구현하는 데 큰 도움이 되는 직접 드래그 앤 드롭 API를 제공합니다. 우리는 많은 js를 작성할 필요가 없습니다. 다양한 드래그 앤 드롭 기능을 구현하는 요소입니다.

Foreword

HTML5는 드래그 앤 드롭 효과를 구현하는 데 큰 도움이 되는 직접 드래그 앤 드롭 API를 제공하므로 많은 js를 작성할 필요가 없습니다. 다양한 효과를 얻기 위한 요소의 드래그 앤 드롭 이벤트입니다.

요소를 드래그 앤 드롭하려면 해당 요소의 draggable 속성을 true로 설정해야 합니다. 속성이 false인 경우 드래그 앤 드롭이 허용되지 않습니다. img 요소와 a 요소 모두 기본적으로 draggable 속성이 true로 설정되어 있으므로 직접 드래그 앤 드롭할 수 있습니다. 이 두 요소를 드래그 앤 드롭하지 않으려면 속성을 false로 설정하면 됩니다.

드래그 앤 드롭 이벤트

드래그 앤 드롭 이벤트는 다양한 요소에 의해 생성됩니다. 요소를 드래그 앤 드롭하면 여러 요소를 통과하여 최종적으로 배치하려는 요소에 도달할 수 있습니다. 여기서는 드래그된 요소를 소스 개체, 전달된 요소를 프로세스 개체, 도착한 요소를 대상 개체라고 임시로 호출합니다. 서로 다른 객체는 서로 다른 드래그 앤 드롭 이벤트를 생성합니다.

소스 개체:

1. dragstart: 소스 개체가 드래그 앤 드롭을 시작합니다.

2. drag: 소스 개체의 드래그 앤 드롭 프로세스 중입니다.

3. dragend: 원본 개체의 드래그 앤 드롭이 종료됩니다.

프로세스 개체:

1. dragenter: 원본 개체가 프로세스 개체의 범위에 들어가기 시작합니다.

2. dragover: 소스 개체가 프로세스 개체의 범위 내에서 이동합니다.

3. dragleave: 소스 개체가 프로세스 개체의 범위를 벗어납니다.

대상 개체:

1. drop: 원본 개체를 대상 개체로 드래그 앤 드롭합니다.

<p id="source" draggable="true">a元素</p>
<p id="process">b元素</p>
<p id="target">c元素</p>

<script>
    var source = document.getElementById(&#39;source&#39;),     // a元素
        process = document.getElementById(&#39;process&#39;),   // b元素
        target = document.getElementById(&#39;target&#39;);     // c元素
    
    source.addEventListener(&#39;dragstart&#39;,function(ev){   // dragstart事件由a元素产生
        console.log(&#39;a元素开始被拖动&#39;);
    },false)

    process.addEventListener(&#39;dragenter&#39;,function(ev){  // dragenter事件由b元素产生
        console.log(&#39;a元素开始进入b元素&#39;);
    },false)
    process.addEventListener(&#39;dragleave&#39;,function(ev){  // dragleave事件由b元素产生
        console.log(&#39;a元素离开b元素&#39;);
    },false)

    target.addEventListener(&#39;drop&#39;,function(ev){        // drop事件由c元素产生
        console.log(&#39;a元素拖放到c元素了&#39;);
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}
</script>

dataTransfer 개체

는 모든 드래그 앤 드롭 이벤트에서 원본 개체와 대상 개체 간에 데이터를 전송하는 데 사용되는 데이터 전송 개체 dataTransfer를 제공합니다. 다음으로, 이 개체가 데이터를 전송하는 방법을 이해하기 위해 이 개체의 메서드와 속성을 알아 보겠습니다.

setData()

이 메서드는 dataTransfer 개체에 데이터를 저장합니다. 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 저장할 데이터 유형을 나타내는 문자열입니다. 현재 지원되는 유형은

1. text/plain입니다.

2. text/html: HTML 텍스트.

3. text/xml: XML 텍스트.

4. text/uri-list: URL 목록, 각 URL은 한 줄입니다.

두 번째 매개변수는 저장할 데이터입니다. 예:

event.dataTransfer.setData('text/plain','Hello World');

getData()

이 메서드는 dataTransfer 개체에서 데이터를 읽습니다. 매개변수는 setData에 지정된 데이터 유형입니다. 예:

event.dataTransfer.getData('text/plain');

clearData()

이 메서드는 dataTransfer 개체에 저장된 데이터를 지웁니다. 매개변수는 선택사항이며 데이터 유형입니다. 매개변수가 비어 있으면 모든 유형의 데이터가 지워집니다. 예:

event.dataTransfer.clearData();

setDragImage()

이 메서드는 img 요소를 사용하여 드래그 앤 드롭 아이콘을 설정합니다. 세 개의 매개변수를 받습니다. 첫 번째는 아이콘 요소이고, 두 번째는 마우스 포인터에서 아이콘 요소의 X축 변위이고, 세 번째는 마우스 포인터에서 아이콘 요소의 Y축 변위입니다. 예:

var source = document.getElementById('source'),
    icon = document.createElement('img');

icon.src = 'img.png';

source.addEventListener('dragstart',function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

effectAllowed 및 dropEffect 속성

이 두 속성은 드래그 앤 드롭의 시각적 효과를 설정하기 위해 결합됩니다.

주의할 점: IE는 dataTransfer 개체를 지원하지 않습니다. 네, IE 버전에 상관없이 지원되지 않습니다.

드래그 앤 드롭 정렬 구현

우리는 이미 드래그 앤 드롭 API의 사용법에 익숙합니다. 프로젝트에서도 흔히 볼 수 있는 간단한 드래그 앤 드롭 정렬을 구현해 보겠습니다. 먼저 아이디어를 정리해 보겠습니다.

1. 목록에서 각 요소를 드래그 앤 드롭할 수 있습니다. 그런 다음 먼저 각 요소에 대해 draggable 속성을 true로 설정해야 합니다.

2. 각 요소의 dragstart 이벤트를 듣고 소스 개체에 스타일을 지정하여 구별하세요.

3. 각 요소의 dragenter 이벤트를 수신합니다. 소스 개체가 현재 요소에 들어가면 해당 요소 앞에 소스 개체를 추가합니다. 이러한 방식으로 후속 요소는 소스 개체에 의해 압착되어 정렬 효과를 얻습니다.

4. 하지만 원본 개체의 순위는 마지막으로 지정할 수 없고 마지막에서 두 번째로만 지정될 수 있습니다. 이때, dragleave 이벤트를 들어야 합니다. 프로세스 객체가 마지막 요소일 때 소스 객체는 프로세스 객체를 떠난 후 소스 객체가 끝에 추가됩니다.

주요 코드는 다음과 같습니다.

var source = document.querySelectorAll('.list'),
    dragElement = null;

for(var i = 0; i < source.length; i++){
    source[i].addEventListener(&#39;dragstart&#39;,function(ev){
        dragElement = this;
    },false);

    source[i].addEventListener(&#39;dragenter&#39;, function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)

    source[i].addEventListener(&#39;dragleave&#39;, function(ev){
        if(dragElement != this){
            if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
                this.parentNode.appendChild(dragElement);
            }
        }
    }, false)
};

document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}

전체 코드 주소: drag-demo

Compatible

주로 IE에서의 호환성은 별로 좋지 않지만, 적어도 IE에서는 호환이 되기 때문입니다. IE10 동적 정렬에서 드래그 위.

그리고 간단한 실험에서 IE에서 요소의 높이가 설정되지 않은 경우 dragleave 이벤트가 실행되지 않는 것을 발견했습니다.

더 중요한 점은 iOS와 Android에서 완전히 호환되지 않는다는 것입니다. 다행히 모바일 장치와 완벽하게 호환되는 플러그인이 있습니다.

플러그인 주소: ios-html5-drag-drop-shim

只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。

<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>

위 내용은 API를 통한 드래그 앤 드롭 정렬 구현에 대한 HTML5 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!