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

머리말

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

드래그 앤 드롭 이벤트

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

소스 객체:

dragstart: 소스 객체가 드래그 앤 드롭을 시작합니다.
드래그: 소스 개체의 드래그 앤 드롭 프로세스 중입니다.
dragend: 원본 개체의 드래그 앤 드롭이 종료됩니다.

• 프로세스 객체:
dragenter: 소스 객체가 프로세스 객체의 범위에 들어가기 시작합니다.
드래그오버: 소스 객체가 프로세스 객체의 범위 내에서 이동합니다.
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 객체

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

setData()

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

text/plain: 텍스트 텍스트.
텍스트/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');

clear

Data()이 메소드는 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의 사용법에 익숙합니다. 프로젝트. 먼저 아이디어를 정리해 보겠습니다.

목록에서 각 요소를 드래그 앤 드롭할 수 있습니다. 그런 다음 먼저 각 요소에 대해 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에서는 OK이지만 적어도 위의 드래그 정렬은 IE10과 호환됩니다.

그리고 간단한 실험에서 IE에서 요소가

높이

로 설정되지 않은 경우 dragleave 이벤트가 실행되지 않는 것을 발견했습니다. 더 중요한 점은 iOS와 Android에서는 전혀 호환되지 않는다는 점입니다. 다행히도 모바일 장치와 완벽하게 호환되는 플러그인이 있습니다.

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


모바일 단말기에서 드래그를 구현하려면 원래 코드에 플러그인을 도입하기만 하면 됩니다.

아아아앙
[관련 추천]

1.

무료 h5 온라인 동영상 튜토리얼

2. HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

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