[drag & drop] HTML5의 drag & drop API 이용하기
http://romeoh.github.com/dragAndDrop/ html5의 drag & drop API를 이용하여 브라우저에 파일을 떨어뜨리는 예제입니다. 브라우저와 떨어뜨릴 사진을 준비합니다. 브라우저에 콘솔로그를 확인하기 위해서 inspector(요소검사)창을 엽니다. (브라우저에서 마우스 오르쪽 클릭 > 요소검사) 사진파일을 브라우저로 드래그 하면 콘솔창에 상태가 표시됩니다. 사진을 브라우저 밖으로 빼면 역시 콘솔에 이벤트가 발생합니다. 사진을 브라우저에 떨어뜨리면 사진이 표시됩니다. (까메오 출연해주신 아드님께 감사~^^) <!doctype html> <html> <head> <meta charset= "utf-8" > <title></title> </head> <body> <img id= "imgEl" src= "" alt= "" > <p>사진을 브라우저 내부로 드래그 해보세요.</p> <script type= "text/javascript" > // 사진을 브라우저 안으로 드래그 window.addEventListener( "dragenter" , function (){ console.log( "dragenter" ); }, false ); // 사진이 브라우저 위에 있음 window.addEventListener( "dragover" , function (){ console.log( "dragover" ); }, false ); // 사진을 브라우저 밖...
