드래그 앤 드롭 API는 드래그 앤 드롭 정렬을 구현합니다.

Foreword

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

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

드래그 앤 드롭 이벤트

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

소스 개체:

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

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

• dragend: 소스 개체의 드래그 앤 드롭이 종료됩니다.

프로세스 개체:

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

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

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

대상 개체:

• 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 object

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

setData()

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

• text/plain입니다.

• text/html: HTML 텍스트.

• text/xml: XML 텍스트.

• 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 Properties

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

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

드래그 앤 드롭 정렬 구현

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

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

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

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

• 하지만 원본 개체의 순위는 마지막으로 지정할 수 없고 마지막에서 두 번째로만 지정될 수 있습니다. 이때, 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

兼容

主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。

更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。
插件地址：ios-html5-drag-drop-shim

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

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

更多文章：lin-xin/blog

위 내용은 드래그 앤 드롭 API는 드래그 앤 드롭 정렬을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!