집 > 기사 > 웹 프론트엔드 > Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.

Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.

高洛峰원래의: 2017-03-12 16:42:301594검색

dataTransfer를 통해 브라우저의 기본 데이터 처리를 방지하려면 preventDefault()를 호출하세요(드롭 이벤트 의 기본 동작은 링크로 여는 것입니다). getData(Text) 메소드는 드래그된 데이터를 가져옵니다. 관심있는 친구들은 원래 효과를 참조할 수 있습니다

효과 드래그 후

Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.

코드는 다음과 같습니다

[code]
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<img  src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" / alt="Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다." >
<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">
 </p>
<p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p>
</body>
</html>

[/code]

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

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

먼저 요소를 드래그 가능하게 만들려면 드래그 가능

속성 을 true로 설정하세요.

코드는 다음과 같습니다.

<img  draggable="true" / alt="Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다." >

드래그할 내용 - ondragstart 및 setData()

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

위 예에서 ondragstart 속성은 드래그할 데이터를 지정하는

함수 , drag(event)를 호출합니다.

dataTransfer.setData() 메소드는

데이터 유형과 드래그된 데이터의 값을 설정합니다.

코드는 다음과 같습니다.

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

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

위치 위치 - ondragover

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

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

ondragover 이벤트의

event.preventDefault() 메서드를 호출하여 배치됩니다.

코드는 다음과 같습니다.

event.preventDefault()

- ondrop

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

위 예에서 ondrop 속성은 drop(

event) 함수를 호출합니다.

코드는 다음과 같습니다.

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

코드 설명:

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

위 내용은 Html5는 두 div 요소 사이에 이미지를 끌어서 놓는 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML5 등록 페이지 샘플 코드다음 기사：HTML5 등록 페이지 샘플 코드