반응형
마우스로 클릭 후 드래그해서 다른 곳으로 드랍하는 기능을 간단한 자바스크립트 코드로 구현해보았다.
HTML
<html>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="imege" src=https://tistory2.daumcdn.net/tistory/4287294/attach/ab12d07ebbf34661a7d7d47ca025dccc
draggable="true" ondragstart="drag(event)"
width="250px" height="250px">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</body>
</html>
- 이미지를 드래그와 드랍을 하기 위해서는 html 태그에 드랍할 장소의 태그에 ondrop="drop(event)"을 각각 붙여줘야한다.
- 그리고 드래그할 이미지 태그에 드래그를 시작하는 요소라는 의미로 ondragstart="drag(event)"을 붙여준다.
- 또 드랍할 위치 태그에 allowDrop(event)는 다른 이벤트가 발생하는 것을 방지 하기 위한 함수이며 이는 자바스크립트에서 제어한다.
CSS
<style>
#div1 {
width: 250px;
height: 250px;
padding: 10px;
margin: 0px 10px 0px 0px;
border: 1px solid #aaaaaa;
float: left;
}
#div2 {
width: 250px;
height: 250px;
padding: 10px;
border: 1px solid #aaaaaa;
float: left;
}
</style>
- 아주 간단한 드랍 드래그 위한 박스를 두 개 만들었다.
Javascript
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("imege",ev.target.id);
}
function drop(ev){
ev.preventDefault()
var data = ev.dataTransfer.getData("imege");
ev.target.appendChild(document.getElementById(data));
}
</script>
- 함수 allowDrop()의 안에 preventDefault() 메소드는 다른 이벤트가 발생하는 것을 방지해주는 역할을 한다.
- 함수 drag()는 마우스로 드래그하는 이벤트가 발생하면 그 즉시 드래그 당하는 해당 객체의 id를 가져와서 dataTransfer.setData로 담아준다. 그리고 메소드의 첫번째 인자는 해당 객체의 별명을 imege로 지정한다. 이 별명을 통해 데이터를 함수 drop()이 전달받게 된다.
- 함수 drop()은 drag()에서 받은 드래그 당하는 객체의 id 값을 dataTransfer.getData("imege")로 받아와 ev.target.appendChild을 이용하여 드랍되어지는 요소 태그에 이미지를 드랍하게 해주었다.
https://github.com/k0502s/drag-and-drop-/blob/master/Study.html
k0502s/drag-and-drop-
Contribute to k0502s/drag-and-drop- development by creating an account on GitHub.
github.com
반응형
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| CSS+Javacript - 슬라이더 메뉴 구현하기 (0) | 2020.12.15 |
|---|---|
| Javascript - 모달창 만들기 기본 (0) | 2020.12.01 |
| Javascript 네트워크 통신 - JSON (0) | 2020.11.27 |
| Javascript 네트워크 통신 - Ajax (0) | 2020.11.27 |
| Javascript 이벤트 타입 - jQuery on API 사용법 (0) | 2020.11.26 |
댓글