주석 : Browser의 기본 데이터 처리 데이터를 피하려면 extenceDefault ()를 호출하고 (낙하 이벤트의 기본 동작이 링크 형식으로 열리고) datatransfer.getData (텍스트) 메소드를 통해 드래그 된 데이터를 얻습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다.
원래 효과
드래그 후 효과
코드는 다음과 같습니다
[암호]
<! doctype html>
<html>
<헤드>
<스타일 유형 = "텍스트/CSS">
#div1, #div2
{float : 왼쪽; 너비 : 100px; 높이 : 35px; 여백 : 10px; 패딩 : 10px; 테두리 : 1px 고체 #aaaaa;}
</스타일>
<script type = "text/javaScript">
기능 허용 드롭 (EV)
{
ev.preventDefault ();
}
기능 드래그 (EV)
{
ev.datatransfer.setdata ( "text", ev.target.id);
}
기능 드롭 (EV)
{
ev.preventDefault ();
var data = ev.datatransfer.getData ( "text");
ev.target.appendChild (document.getElementById (data));
}
</스크립트>
</head>
<body>
<img src = "/i/w3school_logo_black.gif"draggable = "true"ondragstart = "drag (event)"/>
<div ondrop = "drop (event)"ondragover = "allowdrop (event)">
</div>
<div ondrop = "drop (event)"ondragover = "allowdrop (event)"> </div>
</body>
</html>
[/암호]
조금 복잡해 보일 수 있지만 드래그 앤 드롭 이벤트의 다른 부분을 별도로 연구 할 수 있습니다.
드래그 앤 드롭으로 요소를 설정합니다
먼저, 요소를 끌기 쉽게 만들려면 드래그 가능한 속성을 true로 설정하십시오.
<img draggable = "true" />
드래그 할 내용 - OnDragStart 및 setData ()
그런 다음 요소가 드래그 될 때 발생하는 일을 지정하십시오.
위의 예에서, OnDragStart 속성은 함수, DRAR (이벤트)을 호출하여 드래그되는 데이터를 지정합니다.
datatransfer.setData () 메소드는 드래그 된 데이터의 데이터 유형과 값을 설정합니다.
기능 드래그 (EV)
{
ev.datatransfer.setdata ( "text", ev.target.id);
}
이 예에서 데이터 유형은 텍스트이고 값은 Draggable 요소 (DRAG1)의 ID입니다.
어디에 넣을 지 - ondragover
OnDragover 이벤트는 드래그 된 데이터를 배치 할 위치를 지정합니다.
기본적으로 데이터/요소는 다른 요소에 배치 할 수 없습니다. 허용 배치를 설정 해야하는 경우 요소의 기본 처리를 차단해야합니다.
이 행사는 ondragover 이벤트의 이벤트를 호출하여 수행됩니다.
event.preventDefault ()
배치 - ondrop
드롭 데이터가 배치 될 때 드롭 이벤트가 발생합니다.
위의 예에서 Ondrop 속성은 함수, drop (이벤트)을 호출합니다.
기능 드롭 (EV)
{
ev.preventDefault ();
var data = ev.datatransfer.getData ( "text");
ev.target.appendChild (document.getElementById (data));
}
코드 설명 :
Datatransfer.getData (텍스트) 메소드를 통해 드래그 된 데이터를 얻으려면 브라우저의 기본 데이터 처리 (링크 이벤트의 기본 동작이 링크 형식으로 열림)를 피하려면 extenceDefault ()를 호출하십시오. 이 메소드는 setData () 메소드에서 모든 데이터 세트를 동일한 유형으로 반환합니다. 드래그 된 데이터는 드래그 된 요소 (DRAR1)의 ID입니다. 드래그 된 요소를 배치 요소 (대상 요소)에 추가합니다.