HTML5 드래그 앤 드롭 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

HTML5 드래그 앤 드롭 정보

HTML 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.드래그 한 요소를 드롭 요소에 추가합니다.

추천
0

댓글 0개

전체 797
퍼블리셔팁 내용 검색 HTML에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT