javascript에서 drag & drop 구현 하기
1.index.html 파일 생성 및 div로 id=target으로 추가. 추후 Drop Area로 windows의 explorer에서 file을 Drag & Drop 예정
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
#target {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Test nginx1</h1>
<script type="text/javascript"></code>
<div id="target"><p> </p><p>Drop Aread</p><p> </p></div>
</body>
</html>
2. dragover, drop handler 함수 구현. drop effect를 move로 설정
function dragover_handler(ev) {
ev.preventDefault();
// dropEffect를 move로 설정.
ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
ev.preventDefault();
console.log(ev);
}
3.div tag에 drag, drop event 연결
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
4.결과 화면. 외부 파일을 drag후 over시 이동 이라고 effect 확인
