HTML5 드래그 앤 드롭

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

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

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

브라우저 지원

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:300px;height:200px;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>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>

프로그램을 실행하고 이미지를 드래그해 보세요

프로그램이 약간 복잡해 보일 수 있지만 프로그램의 다른 부분을 연구할 수 있습니다. 드래그 앤 드롭 이벤트를 별도로 수행합니다.

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

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

<img draggable="true">

드래그 대상 - ondragstart 및 setData()

그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정하세요.

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

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

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

이 예에서 데이터 유형은 "Text"이고 값은 드래그 가능한 항목의 ID입니다. 요소("드래그1").

넣을 위치 - ondragover

ondragover 이벤트 지정 드래그한 데이터를 어디에 놓을지.

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

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

event.preventDefault()

배치 - ondrop

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

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

function drop(ev)
{
evpreventDefault. ();
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:200px; height:205px; 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="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>

제출하다 코드 재설정

자동운전