집 > 기사 > 웹 프론트엔드 > H5에서 드래그 앤 드롭 기능을 구현하는 방법

H5에서 드래그 앤 드롭 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-01-10 09:27:222351검색

HTML5에서는 드래그 앤 드롭이 표준으로 되어 있어 어떤 요소든 드래그 앤 드롭이 가능합니다. H5로 만든 드래그 앤 드롭 기능이 있는 경우입니다. 살펴 보겠습니다.

<!DOCTYPE HTML>  
<html>  
<head>  
<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>拖动 W3CSchool.cc 图片到矩形框中:</p>  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
<br>  
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
</body>  
</html>

2 요소를 드래그 가능하게 설정하세요

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

3. setData ()

그런 다음 요소를 드래그할 때 어떤 일이 발생하는지 지정하세요. 위의 예에서 ondragstart 속성은 드래그할 데이터를 지정하는 drag(event) 함수를 호출합니다. dataTransfer.setData() 메서드는 드래그된 데이터의 데이터 유형과 값을 설정합니다.

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

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

4. 배치 위치 - ondragover

ondragover 이벤트는 드래그된 데이터를 배치할 위치를 지정합니다. 기본적으로 데이터/요소는 다른 요소에 배치될 수 없습니다. 배치를 허용해야 하는 경우 요소의 기본 처리를 방지해야 합니다. ondragover 이벤트의 event.preventDefault() 메소드를 호출하면 됩니다: event.preventDefault()

5. Place - ondrop

드래그된 데이터가 배치되면 drop 이벤트가 발생합니다. 위의 예에서 ondrop 속성은 drop(event):

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

Code 설명:

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

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!