HTML5 드래그 앤 드롭


드래그 앤 드롭은 HTML5 표준의 일부입니다.

b27335353b2ead8855b5fb5e8de63b4.png

PHP 중국어 웹사이트 아이콘을 직사각형 상자로 드래그하세요.

드래그 앤 드롭

드래그 앤 드롭은 개체를 잡고 나중에 다른 위치로 드래그하는 일반적인 기능입니다.

HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 ​​드래그 앤 드롭할 수 있습니다.

브라우저 지원

e788739015d6484a44f564f64791f9e.png

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari는 드래그를 지원합니다.

참고: Safari 5.1.2는 드래그를 지원하지 않습니다.

HTML5 드래그 앤 드롭 예시

다음 예시는 간단한 드래그입니다. 인스턴스 배치:

인스턴스

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>拖动 php中文网 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://img.php.cn/upload/course/000/000/010/58043146a1da1979.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

조금 복잡해 보일 수도 있지만 드래그 앤 드롭 이벤트의 여러 부분을 별도로 연구할 수 있습니다.

요소를 드래그 가능으로 설정

먼저 요소를 드래그 가능하게 만들려면 draggable 속성을 true로 설정하세요.

<img draggable="true">

드래그할 대상 - ondragstart 및 setData()

그런 다음 요소를 드래그할 때 다음과 같이 규정합니다. 무슨 일이 일어나는지.

위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다.

dataTransfer.setData() 메소드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.

함수 드래그(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

이 예에서 데이터 유형은 "텍스트"이고 값은 드래그 가능한 요소("drag1")의 ID입니다.

위치 위치 - ondragover

ondragover 이벤트는 드래그된 데이터를 위치할 위치를 지정합니다.

기본적으로 데이터/요소는 다른 요소 안에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다.

이 작업은 ondragover 이벤트의 event.preventDefault() 메서드를 호출하여 수행됩니다.

event.preventDefault()

Place - ondrop

드래그된 데이터가 배치되면 drop 이벤트가 발생합니다.

위 예에서 ondrop 속성은 drop(event) 함수를 호출합니다. 

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
코드 설명:

  • preventDefault()를 호출하여 브라우저의 기본 데이터 처리를 방지합니다(드롭 이벤트의 기본 동작은 링크로 열리는 것입니다)

  • dataTransfer를 통해 .getData ("Text") 메서드를 사용하면 드래그된 데이터를 얻을 수 있습니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.

  • 드래그된 데이터는 드래그된 요소의 ID("drag1")입니다.

  • 드래그된 요소를 배치 요소(대상 요소)에 추가합니다. )

예제 더보기

이미지를 앞뒤로 드래그 앤 드롭
두 <div> 강요.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="https://img.php.cn/upload/course/000/000/010/58049330dcf69494.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요