Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.
참고 : Safari 5.1.2에서 드래그를 지원하지 마십시오. HTML5 드래그 앤 드롭 인스턴스 <html> <html> <스타일 유형/css> #488px; JavaScript> function allowdrop (ev.preventDefault ();} 함수 drag (ev.datatransfer.setData) {ev.preventDefault (); ev.datatransfer.getData (text); ev.target.appendChild (document.getElementByid (data)) </script> </head> <p> 드래그 앤 드롭 ： p> <div1 ondrop = drop (event) ondragover = allowdrop (이벤트)> div> <br/> <img id = drag1 src = http : //www.aseoe.com/statics/images /eoe/logo.png draggable = true ondragstart = drag (이벤트)/> </body> </html> 요소를 드래그 앤 드롭으로 설정하십시오우선, 요소를 드래그하기 위해 드래그 가능한 속성을 true로 설정하십시오.
드래그 드래그 스테이트 및 setData ()그런 다음 요소가 드래그 될 때 발생하는 일이 지정됩니다.
위의 예에서, OnDragStart 속성은 DRACDED 데이터를 지정하는 함수, DRAR (이벤트)을 호출합니다.
datatransfer.setData () 메소드 설정 데이터 드래그 데이터의 데이터 유형과 값을 설정합니다.
함수 드래그 (EV) {ev.datatransfer.setData (Text, ev.target.id);}이 예에서는 데이터 유형이 텍스트이고 값은 요소를 드래그 할 수있는 id (drag1)입니다.
it-ondragover를 넣을 위치OnDragover 이벤트는 드래그 된 데이터를 배치 할 위치를 규정합니다.
기본값, 데이터/요소는 다른 요소에 배치 할 수 없습니다. 허용 가능한 배치를 설정 해야하는 경우 요소의 기본 처리를 방지해야합니다.
ondragover 이벤트의 이벤트를 호출하는 것입니다. :) :
event.preventDefault ()퍼팅-론
드래그 데이터가 배치되면 드롭 이벤트가 발생합니다.
위의 예에서 ondrop 속성은 함수, drop (이벤트)을 호출합니다.
함수 드롭 (ev) {ev.preventDefault (); 코드 설명 :데이터의 브라우저의 기본 처리를 피하려면 extenceDefault ()에 전화하십시오 (드롭 이벤트의 기본 동작이 링크에서 열립니다).
datatransfer.getData (텍스트) 메소드를 통해 드래그 된 데이터를 가져옵니다. 이 메소드는 setData () 메소드에서 동일한 유형의 모든 데이터로 돌아갑니다.
드래그 데이터는 드래그 요소의 ID입니다 (drag1)
배치 요소에 대한 추가 드래그 요소 (대상 요소)
요약위의 내용은이 기사의 내용이 HTML5를 배우거나 사용하는 데 도움이되기를 바랍니다.