HTML5를 사용하여 단일 요소를 드래그 앤 드롭하는 방법은 무엇입니까? 이 기사에서는 HTML 요소를 끌어서 놓기 위한 HTML5를 사용하여 개별 요소의 드래그 앤 드롭을 구현하는 방법 코드를 소개합니다. 구체적인 구현 내용을 살펴보겠습니다.
HTML5의 드래그 앤 드롭 기능을 이용하면 HTML 페이지 요소를 드래그 앤 드롭할 수 있습니다
구체적인 예를 살펴보겠습니다
코드는 다음과 같습니다
SimpleDragDrop.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div class="box" draggable="true"></div>
<div id="dropzone" class="dropzone">
</div>
</body>
</html>SimpleDragDrop .css
.box {
width:32px;
height:32px;
border:solid 1px #002f9f;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}지침 :
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
위의 두 div가 페이지에 표시됩니다. class="box", id="dropzone"을 사용하여 허용 영역이 배치되는 div인 개체를 드래그할 수 있습니다. 드래그 가능한 객체의 경우 드래그 가능한 객체에 draggable="true"를 설정할 수 있습니다.
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
var zone = document.querySelector('.dropzone');
zone.addEventListener('dragover', onDragOver, false);
zone.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('text', this.id);
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}위 코드는 각 요소에 드래그 앤 드롭 이벤트를 할당합니다.
요소를 드래그하기 위해 "dragstart" 이벤트를 설정했습니다. 드래그가 시작되면 onDragStart 함수가 실행됩니다.
요소를 삭제하려면 "드래그오버" "드롭" 이벤트를 설정하세요. 드래그된 요소가 드래그 앤 드롭 영역에 들어가면 onDragOver 함수가 실행되고, 요소가 드롭되면 onDrop 함수가 실행됩니다.
dragstart의 경우 dataTransfer 객체의 값을 설정하는 코드를 작성해야 합니다. dataTransfer에 삽입된 값을 사용하지 않지만, 이 코드가 없으면 데이터 없이도 작동합니다.
실행 결과
웹 브라우저를 사용하여 위 HTML 파일을 표시하세요. 아래와 같은 효과가 표시됩니다.
상단의 상자를 드래그하세요. 하단 프레임으로 드래그하면 프레임에 "onDragOver"가 나타납니다.
프레임에 넣으면 "onDrop" 문자가 프레임에 나타납니다.
예제 2: 이벤트가 추가된 요소를 드래그 앤 드롭하는 방법
코드는 다음과 같습니다
SimpleDragDrop2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SimpleDragDrop2.css" />
<script>
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}
</script>
</head>
<body onload="load();">
<div id="box" class="box" draggable="true"></div>
<div id="dropzone" class="dropzone"></div>
</body>
</html>SimpleDragDrop.css
.box {
width:32px;
height:32px;
border:solid 1px #d01313;
}
.dropzone {
margin-top:16px;
margin-bottom:16px;
width: 280px;
height: 64px;
border: solid 1px #808080;
}지침:
<div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div>
예제에 표시된 대로 위의 경우 Two page DIV 페이지에 표시됩니다. 드래그 가능한 개체의 경우 드래그 가능한 개체에 draggable="true"를 설정합니다.
function load() {
var box = document.querySelector('.box');
box.addEventListener('dragstart', onDragStart, false);
box.addEventListener('dragend', onDragEnd, false);
var box = document.querySelector('.dropzone');
box.addEventListener('dragenter', onDragEnter, false);
box.addEventListener('dragover', onDragOver, false);
box.addEventListener('dragleave', onDragLeave, false);
box.addEventListener('drop', onDrop, false);
}
function onDragStart(e) {
e.dataTransfer.setData('Text', this.id);
this.textContent = 'onDragStart';
}
function onDragEnd(e) {
this.textContent = 'onDragEnd';
}
function onDragEnter(e) {
this.textContent = 'onDragEnter';
}
function onDragOver(e) {
e.preventDefault();
this.textContent = 'onDragOver';
}
function onDragLeave(e) {
this.textContent = 'onDragLeave';
}
function onDrop(e) {
e.preventDefault();
this.textContent = 'onDrop';
}위의 코드는 드래그 앤 드롭 이벤트를 각 요소에 할당합니다.
"dragstart" 및 "dragend" 이벤트는 드래그된 쪽의 요소에 할당됩니다. 드래그가 시작되면 ondstart 함수가 호출되고 드래그가 완료된 후 ondos agEs 함수가 호출됩니다.
"dragenter", "dragover", "dragleave" 및 "drop" 이벤트는 드래그할 요소에 할당됩니다. 드래그된 요소가 드래그 앤 드롭 영역에 들어오면 onDragEnter 함수가 실행됩니다. 드래그 앤 드롭 영역 내에서 드래그되는 동안 onDragOver 함수가 실행됩니다. OnDragLeave 함수가 실행됩니다. 드래그된 요소가 드롭되면 onDrop 함수가 실행됩니다.
실행 결과
웹 브라우저를 사용하여 위 HTML 파일을 표시합니다. 아래와 같은 효과가 표시됩니다.
빨간색 영역의 사각형 영역을 드래그하세요. 이 영역에는 "onDragStart" 문자가 표시됩니다.
드래그를 놓으면 "onDragEnd"라는 문자의 빨간색 상자 안의 영역이 표시됩니다.
빨간색 상자 영역을 다시 드래그하세요. 하단 영역으로 드래그 앤 드롭하면 "onDragOver" 문자가 드롭 영역에 표시됩니다.
드래그 앤 드롭 영역의 빨간색 상자 영역에 드래그를 놓으면 하단 영역에 "onDrop" 문자가 표시됩니다.
빨간색 상자를 다시 드래그하여 배치 영역을 겹치세요. "onDragOver" 문자가 표시됩니다.
빨간색 상자를 드래그 앤 드롭 영역 밖으로 드래그하세요. 드롭 영역의 문자 표시가 "onDragLeave"로 변경됩니다.
위 내용은 HTML5를 사용하여 개별 요소의 드래그 앤 드롭을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
