HTML5 드래그 앤 드롭(드래그 앤 드롭) 예제 설명-H5 튜토리얼-php.cn

HTML5 드래그 앤 드롭(드래그 앤 드롭) 예제 설명

零下一度

풀어 주다： 2017-05-15 10:45:23

원래의

1489명이 탐색했습니다.

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

드래그 앤 드롭

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

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

브라우저 지원

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

참고: Safari 5.1.2는 드래그를 지원하지 않습니다.

HTML5 드래그 앤 드롭 예

다음 예는 간단한 드래그 앤 드롭 예입니다.

<!DOCTYPE HTML>
<html>
<head>
<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)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>

로그인 후 복사

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

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

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

<img draggable="true">

로그인 후 복사

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

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

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

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

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

로그인 후 복사

2. 무료 h5 온라인 비디오 튜토리얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5 드래그 앤 드롭(드래그 앤 드롭) 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

HTML5 드래그 앤 드롭(드래그 앤 드롭) 예제 설명