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

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

php中世界最好的语言원래의: 2018-01-19 09:28:571996검색

이번에는 H5 드래그 앤 드롭을 구현하는 방법과 H5 드래그 앤 드롭 효과를 얻으려면 어떤 notes를 사용해야 하는지 보여드리겠습니다. 다음은 실제 사례입니다.

소개

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

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

먼저 작은 예를 클릭하세요. 사용자가 e388a4556c0f65e1904146cc1a846bee 요소를 드래그하기 시작할 때 JavaScript

<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>

를 실행하세요. 팁: 링크와 images는 기본적으로 드래그 가능하며 드래그 가능 속성이 필요하지 않습니다.

정의 및 사용법

다음 이벤트는 드래그 앤 드롭 프로세스 중에 트리거됩니다.

드래그 대상(소스 요소)에 대한 트리거 이벤트: ondragstart - 사용자가 요소 드래그를 시작할 때 트리거됩니다.

ondrag - 요소가 드래그되고 있습니다. 이동할 때 트리거됩니다.

ondragend - 사용자가 요소 드래그를 완료한 후 트리거됩니다.

대상이 놓일 때 트리거되는 이벤트: ondragenter - 이 이벤트는 마우스로 드래그한 개체가 컨테이너 범위에 들어갈 때 트리거됩니다.

ondragover - 객체를 드래그할 때 이 이벤트는 객체가 다른 객체의 컨테이너 범위 내에서 드래그될 때 트리거됩니다.

ondragleave - 마우스로 드래그하는 객체가 컨테이너 범위를 벗어날 때 이 이벤트가 트리거됩니다.

ondrop - 마우스 버튼이 드래그 프로세스 중에 해제됨 이 이벤트 트리거

브라우저 지원

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

참고: Safari 5.1.2는 드래그를 지원하지 않습니다. 요소를 드래그하면 ondragover 이벤트가 350밀리초마다 실행됩니다.

예제

먼저 코드를 붙여넣은 다음 하나씩 설명하세요.

<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
</head>
<body>
<p>拖动img_w3slogo.gif图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
 
<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>
</body>
</html>

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