HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법
- 不言원래의
- 2018-12-01 14:52:085026검색
HTML5의 드래그 앤 드롭 기능을 사용하면 HTML 페이지 요소를 드래그 앤 드롭할 수 있습니다. 이전 글에서는 단일 요소를 드래그 앤 드롭할 수 있는 코드를 소개했습니다. 다음 글에서는 여러 요소를 드래그 앤 드롭할 수 있는 코드를 소개하겠습니다.
더 이상 고민하지 말고 예제를 직접 살펴보겠습니다.
예 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('del');
delbox.addEventListener('dragover', onDragOver, false);
delbox.addEventListener('drop', onDrop, false);
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}
}
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
}
function onDrop(e) {
if (e.stopPropagation) e.stopPropagation();
var eid = e.dataTransfer.getData('text');
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('del'); delbox.addEventListener('dragover', onDragOver, false); delbox.addEventListener('drop', onDrop, false);
querySelectorAll 메소드를 호출하여 ul 태그의 li 요소를 가져옵니다. for 루프는 에서 얻은 요소 배열을 반복적으로 처리하고 각 요소의 "드래그 가능" 속성을 true로 설정합니다. 이 프로세스는 이를 드래그 가능한 개체로 설정합니다. 또한 dragstart 이벤트를 할당합니다.
var elems = document.querySelectorAll('ul#list1 > li');
for (var i = 0; i < elems.length; i++) {
el = elems[i];
el.setAttribute('draggable', 'true');
el.addEventListener('dragstart', onDragStart, false);
}목록 항목을 드래그하면 다음 onDragStart 함수가 호출됩니다. dataTransfer 객체의 setData 메소드를 호출하여 dataTransfer 객체에 요소의 ID를 저장합니다.
function onDragStart(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text', 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('text');
var elem = document.getElementById(eid);
elem.parentNode.removeChild(elem);
}실행 결과:
웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다.
페이지 하단 목록의 항목을 드래그할 수 있습니다. 예를 들어 "Penguin" 항목을 삭제 영역으로 드래그하면 다음 목록 항목에 세 번째 항목 "Penguin"이 표시되지 않습니다. 구체적인 효과는 아래 그림과 같습니다
드래그 다른 항목을 이동해도 동일한 효과가 있으며, 5개 항목을 모두 삭제할 수 있습니다.
위 내용은 HTML5를 사용하여 여러 요소에 대한 드래그 앤 드롭 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!