HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법-H5 튜토리얼-php.cn

HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법

不言

풀어 주다： 2018-12-01 14:52:08

원래의

5028명이 탐색했습니다.

HTML5의 드래그 앤 드롭 기능을 사용하면 HTML 페이지 요소를 드래그 앤 드롭할 수 있습니다. 이전 글에서는 단일 요소를 드래그 앤 드롭할 수 있는 코드를 소개했습니다. 다음 글에서는 여러 요소를 드래그 앤 드롭할 수 있는 코드를 소개하겠습니다.

HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법

더 이상 고민하지 말고 예제를 직접 살펴보겠습니다.

예 1: UL 태그를 사용하여 여러 요소 드래그 앤 드롭

코드는 다음과 같습니다.

ListDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ListDragDrop.css"/>
  <script>
    function load() {      
      var delbox = document.getElementById(&#39;del&#39;);
      delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
      delbox.addEventListener(&#39;drop&#39;, onDrop, false);      
      var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);      
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
        el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
      }
    }    
function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }    
function onDragOver(e) {
      e.preventDefault();
    }    
function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();      
      var eid = e.dataTransfer.getData(&#39;text&#39;);      
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }  
</script>
</head>
<body onload="load();">
   <div id="del">删除</div>
    <ul id="list1">
      <li id="1">海豚</li>
      <li id="2">鲸鱼</li>
      <li id="3">企鹅</li>
      <li id="4">北极熊</li>
      <li id="5">雪狐</li>
    </ul>
    </ul>
</body>
</html>

로그인 후 복사

ListDragDrop.css

#del{
  width:120px;  
  height:60px;  
  border: solid 2px #ff6a00;
  }
ul#list1 > li {
  display: block;  
  width: 150px;  
  border: 1px solid #808080;
  }

로그인 후 복사

지침 :

페이지를 로드할 때 로딩 기능을 실행하세요. 로드 함수의 다음 코드는 드래그오버 및 드롭 이벤트를 [삭제] div에 할당합니다. 요소를 삭제 상자에 드래그하면 onDragOver 함수가 호출되고, 삭제되면 onDrop 함수가 호출됩니다.

var delbox = document.getElementById(&#39;del&#39;);
  delbox.addEventListener(&#39;dragover&#39;, onDragOver, false);
  delbox.addEventListener(&#39;drop&#39;, onDrop, false);

로그인 후 복사

querySelectorAll 메소드를 호출하여 ul 태그의 li 요소를 가져옵니다. for 루프는 에서 얻은 요소 배열을 반복적으로 처리하고 각 요소의 "드래그 가능" 속성을 true로 설정합니다. 이 프로세스는 이를 드래그 가능한 개체로 설정합니다. 또한 dragstart 이벤트를 할당합니다.

var elems = document.querySelectorAll(&#39;ul#list1 > li&#39;);  
for (var i = 0; i < elems.length; i++) {
    el = elems[i];
    el.setAttribute(&#39;draggable&#39;, &#39;true&#39;);
    el.addEventListener(&#39;dragstart&#39;, onDragStart, false);
  }

로그인 후 복사

목록 항목을 드래그하면 다음 onDragStart 함수가 호출됩니다. dataTransfer 객체의 setData 메소드를 호출하여 dataTransfer 객체에 요소의 ID를 저장합니다.

function onDragStart(e) {
      e.dataTransfer.effectAllowed = &#39;copy&#39;;
      e.dataTransfer.setData(&#39;text&#39;, this.id);
    }

로그인 후 복사

목록의 항목을 드롭 영역으로 드래그하면 다음 onDragOver 함수가 호출됩니다. DragOver에는 특별한 처리가 없으므로 PreventDefault 메서드를 호출하여 이벤트를 취소합니다.

function onDragOver(e) {
      e.preventDefault();
    }

로그인 후 복사

드래그 앤 드롭 영역 내에서 목록의 항목이 삭제되면 onDrop 함수를 호출할 수 있습니다. 이벤트 처리를 취소하려면 stopPropagation 메소드를 호출하십시오. 그런 다음 dataTransfer 개체에서 ID를 가져옵니다. ID를 얻으면 드롭존에 드롭된 요소를 얻을 수 있습니다. getElementById 메소드를 호출하고 ID에서 LI 태그가 지정된 객체를 가져옵니다. 획득한 LI 객체의 parentNode 속성을 이용하여 부모 노드에 접근하고, RemoveChild 메소드를 호출하면 폐기된 목록의 항목이 제거됩니다.

function onDrop(e) {      
if (e.stopPropagation) e.stopPropagation();      
var eid = e.dataTransfer.getData(&#39;text&#39;);      
var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

로그인 후 복사

실행 결과:

웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다.

HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법