Html5는 두 div 요소 사이에 이미지를 드래그 앤 드롭하는 방법을 구현합니다_html5 튜토리얼 팁

원래 효과

드래그 후 효과

코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.

[코드]

< ;/body>

[/code]
좀 복잡해 보일 수도 있지만 드래그 앤 드롭의 다양한 부분을 연구할 수 있습니다. 이벤트를 별도로.

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

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

코드를 복사하세요

코드는 다음과 같습니다.

드래그 대상 - ondragstart 및 setData()

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

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

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

코드 복사

코드는 다음과 같습니다:

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

이 예에서 데이터 유형은 "Text"이고 값은 드래그 가능한 요소의 ID("drag1")입니다. 어디에 넣을지

- ondragover

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

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

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

코드 복사

코드는 다음과 같습니다.

event.preventDefault()

배치 - ondrop

드래그된 데이터를 드롭하면 드롭 이벤트가 발생합니다.

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

코드 복사

코드는 다음과 같습니다.

function drop(ev)
{
ev.preventDefault()
var data=ev.dataTransfer.getData( "텍스트");
ev.target.appendChild(document.getElementById(data))
}

코드 설명:

preventDefault()를 호출하여 브라우저의 기본 데이터 처리를 방지하고(드롭 이벤트의 기본 동작은 이벤트를 링크로 여는 것임) dataTransfer.getData("Text") 메서드를 통해 드래그된 데이터를 가져옵니다. 이 메소드는 setData() 메소드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다. 드래그된 데이터는 드래그된 요소의 ID("drag1")입니다. 드래그된 요소를 배치된 요소(대상 요소)에 추가합니다.