HTML5 드래그 앤 드롭
HTML5 드래그 앤 드롭
끌어서 놓기
드래그 앤 드롭은 매우 일반적인 기능입니다. 그것은 당신이 물건을 "움켜 잡아"다른 위치로 끌 때입니다.
HTML5에서 드래그 앤 드롭은 표준의 일부입니다. 모든 요소를 드래그 할 수 있습니다.
HTML 끌어서 놓기 예제
아래의 예제는 간단한 드래그 앤 드롭 예제입니다.
<!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);
}
이 경우 데이터 유형은 "텍스트"이고 값은 드래그 할 수있는 요소의 ID입니다 ( "drag1").
어디서 떨어지는 지 - ondragover
ondragover 이벤트는 드래그 된 데이터를 삭제할 수있는 위치를 지정합니다.
기본적으로 데이터 / 요소는 다른 요소에 놓을 수 없습니다. 드롭을 허용하려면 요소의 기본 처리를 방지해야합니다.
ondragover 이벤트에 대해 event.preventDefault () 메서드를 호출하면됩니다.
event.preventDefault()
Drop - ondrop을하십시오.
드래그 된 데이터가 삭제되면 드롭 이벤트가 발생합니다.
위 예제에서 ondrop 속성은 함수 drop (이벤트)을 호출합니다.
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
설명 된 코드 :
1.데이터의 브라우저 기본 처리를 방지하려면 preventDefault ()를 호출하십시오 (기본값은 드롭 다운 링크로 열림)
2.dataTransfer.getData () 메소드로 드래그 된 데이터를 가져옵니다. 이 메서드는 setData () 메서드에서 동일한 유형으로 설정된 모든 데이터를 반환합니다.
3.드래그 된 데이터는 드래그 된 요소의 ID입니다 ( "drag1").
4.드래그 한 요소를 드롭 요소에 추가합니다.
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 737 | CSS |
kiplayer
|
11년 전 | 16453 | |
| 736 | HTML |
 돼지코구뇽 |
11년 전 | 7100 | |
| 735 | CSS |
잘살아보자
|
11년 전 | 5795 | |
| 734 | CSS |
잘살아보자
|
11년 전 | 4523 | |
| 733 | CSS |
잘살아보자
|
11년 전 | 6778 | |
| 732 | HTML |
잘살아보자
|
11년 전 | 4716 | |
| 731 | CSS |
잘살아보자
|
11년 전 | 9436 | |
| 730 | 기타 |
잘살아보자
|
11년 전 | 3484 | |
| 729 | HTML |
잘살아보자
|
11년 전 | 7650 | |
| 728 | 기타 |
 LaRuota |
11년 전 | 6802 | |
| 727 | 기타 | 11년 전 | 11471 | ||
| 726 | 기타 |
LaRuota |
11년 전 | 5475 | |
| 725 | 기타 |
네이비칼라
|
11년 전 | 4382 | |
| 724 | CSS |
잘살아보자
|
11년 전 | 4889 | |
| 723 | CSS |
잘살아보자
|
11년 전 | 6607 | |
| 722 | CSS |
잘살아보자
|
11년 전 | 17072 | |
| 721 | CSS |
 매직크레용 |
11년 전 | 7160 | |
| 720 | 기타 | 11년 전 | 3763 | ||
| 719 | 기타 | 12년 전 | 7326 | ||
| 718 | CSS | 12년 전 | 10515 | ||
| 717 | 반응형 | 12년 전 | 6133 | ||
| 716 | 반응형 | 12년 전 | 14554 | ||
| 715 | 기타 | 12년 전 | 7320 | ||
| 714 | CSS | 12년 전 | 5039 | ||
| 713 | 반응형 | 12년 전 | 30115 | ||
| 712 | 기타 | 12년 전 | 5273 | ||
| 711 | HTML |
kiplayer
|
12년 전 | 10878 | |
| 710 | CSS | 12년 전 | 15282 | ||
| 709 | 웹접근성 | 12년 전 | 6733 | ||
| 708 | 웹접근성 | 12년 전 | 6051 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기