HTML5 고급 자습서 - 드래그 앤 드롭 정렬을 구현하는 드래그 앤 드롭 API-H5 튜토리얼-php.cn

HTML5 고급 자습서 - 드래그 앤 드롭 정렬을 구현하는 드래그 앤 드롭 API

零下一度

풀어 주다： 2017-05-12 12:02:36

원래의

1704명이 탐색했습니다.

머리말

HTML5는 직접 드래그 앤 드롭 API를 제공합니다. 훌륭한 드래그 앤 드롭 효과를 구현하는 것이 편리합니다. js를 많이 작성할 필요가 없습니다. 요소. 요소를 드래그 앤 드롭하려면 해당 요소의 draggable 속성을 true로 설정해야 합니다. 속성이 false인 경우 드래그 앤 드롭이 허용되지 않습니다. img 요소와 a 요소 모두 기본적으로 draggable 속성이 true로 설정되어 있으므로 직접 드래그 앤 드롭할 수 있습니다. 이 두 요소를 드래그 앤 드롭하지 않으려면 속성을 false로 설정하면 됩니다.

드래그 앤 드롭 이벤트

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

소스 객체:

프로세스 객체:

대상 개체:

<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 객체에 데이터를 저장합니다. 두 개의 매개변수를 받습니다. 첫 번째는 저장할 데이터 유형을 나타내는 문자열입니다.

xml
: XML 텍스트.
두 번째 파라미터는 저장할 데이터입니다. 예:

event.dataTransfer.setData(&#39;text/plain&#39;,&#39;Hello World&#39;);

로그인 후 복사

getData()

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

event.dataTransfer.getData(&#39;text/plain&#39;);

로그인 후 복사

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

event.dataTransfer.clearData();

로그인 후 복사

setDragImage()

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

var source = document.getElementById(&#39;source&#39;),
    icon = document.createElement(&#39;img&#39;);

icon.src = &#39;img.png&#39;;

source.addEventListener(&#39;dragstart&#39;,function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

로그인 후 복사

effectAllowed 및 dropEffect 속성

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

주목할 만한 점은 IE가 dataTransfer 개체를 지원하지 않는다는 것입니다. 네, IE 버전에 상관없이 지원되지 않습니다.

드래그 앤 드롭 정렬 구현

우리는 이미 드래그 앤 드롭 API의 사용법에 익숙합니다. 프로젝트. 먼저 아이디어를 정리해 보겠습니다.

메인 코드는 다음과 같습니다.

var source = document.querySelectorAll(&#39;.list&#39;),
    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

호환