드래그 앤 드롭은 일반적인 기능, 즉 캡처 객체 후에 다른 위치로 드래그합니다.
HTML5에서 드래그 앤 드롭은 표준 부분이며 모든 요소를 드래그 및 떨어 뜨릴 수 있습니다.
Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari 지원 드래그.
참고 : Safari 5.1.2는 드래그를 지원하지 않습니다.예:
<html> <html> <head> <title> 드래그 앤 드드 스타일 = 텍스트/css> #높이 : 360px; 스타일> <cript> 함수 alowdrop (ev) {ev.preventDefault ();} 함수 drag (ev.datatransfer.setData (text, evraget.id);} 함수 op (ev) {ev. var data = ev.datatransfer.getData (텍스트); = drag1 src = img /bg_1.jpg draggable = true ondragstart = drag (이벤트) 너비 = 300px heig ht = 180px /> < /body> < /html>우선 요소를 드래그하기 위해 드래그 가능한 속성을 true로 설정합니다. <img draggable = true>
그런 다음 요소가 드래그 될 때 발생하는 일이 지정됩니다.
위의 예에서, OnDragStart 속성은 DRACDED 데이터를 지정하는 함수, DRAR (이벤트)을 호출합니다.
datatransfer.setData () 메소드 설정 데이터 드래그 데이터의 데이터 유형과 값을 설정합니다. 함수 드래그 (EV) {ev.datatransfer.setData (Text, ev.target.id);}이 예에서는 데이터 유형이 텍스트이고 값은 요소를 드래그 할 수있는 id (drag1)입니다.
OnDragover 이벤트는 드래그 된 데이터를 배치 할 위치를 규정합니다.기본값, 데이터/요소는 다른 요소에 배치 할 수 없습니다. 허용 가능한 배치를 설정 해야하는 경우 요소의 기본 처리를 방지해야합니다.
이것은 event.preventDefault () ondragover 이벤트 의 메소드 : event.preventDefault ()를 호출하는 것입니다.
드래그 데이터가 배치되면 드롭 이벤트가 발생합니다.
위의 예에서 ondrop 속성은 함수, drop (이벤트)을 호출합니다.
함수 드롭 (ev) {ev.preventDefault ();코드 설명 :
데이터의 브라우저의 기본 처리를 피하려면 extenceDefault () 에 전화하십시오 (드롭 이벤트의 기본 동작이 링크에서 열립니다).
datatransfer.getData (텍스트) 메소드 를 통해 드래그 된 데이터를 가져옵니다. 이 메소드는 setData () 메소드에서 동일한 유형의 모든 데이터로 돌아갑니다.
드래그 데이터는 드래그 요소의 ID입니다 (drag1)
배치 요소에 대한 추가 드래그 요소 (대상 요소)
앞뒤로 드래그 :두 곳에서 앞뒤로 드래그하려면 위의 코드를 수정하십시오.
신체의 코드 변경 :
<body> <div id = div1 ondrop = drop (event) ondragover = allowdrop (event)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) 너비 = 300px 높이 = 180px/> </div> </div> </div> <div id = div2 ondrop = drop (event) ondragover = allowdrop (이벤트)> </div> </body>
그런 다음 스타일 스타일에#div2를 추가하십시오.
<텍스트/css> #div2 {360px;이것은 앞뒤로 끌 수 있습니다.
위는이 기사의 모든 내용입니다.