드래그 앤 드롭 정렬 예제 코드의 HTML5 드래그 앤 드롭 API 구현

HTML5는 직접 드래그 앤 드롭 API를 제공하므로 많은 내용을 작성할 필요가 없습니다. Node.js에서는 요소만 듣기만 하면 됩니다. 드래그 앤 드롭 이벤트 는 다양한 드래그 앤 드롭 기능을 구현할 수 있습니다.

머리말

HTML5는 직접 드래그 앤 드롭 API를 제공하므로 드래그 앤 드롭 효과를 매우 쉽게 얻을 수 있습니다. js를 많이 작성하고, 그냥 요소의 드래그 앤 드롭 이벤트를 청취하여 다양한 드래그 앤 드롭 기능을 구현할 수 있습니다.

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

드래그 앤 드롭 이벤트

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

소스 객체:

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

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

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

프로세스 객체:

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

2. 드래그오버: 소스 객체가 프로세스 객체의 범위 내에서 이동합니다.

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/text입니다. .

2. 텍스트/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

호환 가능

主要是在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>

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