드래그 앤 드롭 정렬을 위한 H5 드래그 앤 드롭 API

이번에는 드래그 앤 드롭 정렬을 위한 H5 드래그 앤 드롭 API를 가져왔습니다. 드래그 앤 드롭 정렬을 위한 H5 드래그 앤 드롭 API의 주의사항은 무엇인가요? 사례를 살펴보겠습니다.

Foreword

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

요소를 드래그 앤 드롭하려면 해당 요소의 드래그 가능한 속성을 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('source'),     // a元素
        process = document.getElementById('process'),   // b元素
        target = document.getElementById('target');     // c元素
    
    source.addEventListener('dragstart',function(ev){   // dragstart事件由a元素产生
        console.log('a元素开始被拖动');
    },false)
    process.addEventListener('dragenter',function(ev){  // dragenter事件由b元素产生
        console.log('a元素开始进入b元素');
    },false)
    process.addEventListener('dragleave',function(ev){  // dragleave事件由b元素产生
        console.log('a元素离开b元素');
    },false)
    target.addEventListener('drop',function(ev){        // drop事件由c元素产生
        console.log('a元素拖放到c元素了');
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}
</script>

dataTransfer object

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

setData()

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

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('dragstart',function(ev){
        dragElement = this;
    },false);
    source[i].addEventListener('dragenter', function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)
    source[i].addEventListener('dragleave', 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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端页面跳转并取值的实现

H5的多线程（Worker SharedWorker）使用详解

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