드래그 앤 드랍을 이용하다보니 정리가 조금 필요할 거 같아서 개발일지에 남겨봅니다.
우선 익스플로워 9.0 이상부터는 드래그 앤 드랍이 지원이 됩니다. 음.. 국내에서 아직도 익스 6,7,8 비중이 있으니 무시는 못하지만 그래도 거의 다 지원된다고 해도 과언이 아닐 것 같네요.
우선 드래그앤 드랍은 기본적으로 html5의 자바스크립트를 이용한다라고 보시면 쉽습니다. 자바스크립트가 무엇인가요? 라고 물어보시면 자바스크립트에 대해서 조금 공부를 하셔야 합니다.
그럼 Drag and Drop 은 무엇인가 하면 기본적으로 마우스로 잡아 끌어 넣는 걸 이야기 합니다. 보통 윈도우 에서 폴더 안이나 이동 할 때 마우스로 파일이나 폴더를 잡아서 끌어넣죠? 그런 것을 브라우져에서도 되게끔 하는 것입니다.
HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.
웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.
이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <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> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> | cs |
이렇게 해보시면 드래그앤 드랍이 되는 것을 확인하실 수 있습니다.(출처 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop)
기본적인 방법으로로 응용을 한다면 구글의 blogger 만큼 만드실 수 있습니다.~개발 하시는 모든 분들 화이팅!
