html 요소를 드래그 할 수 있게 한다.
<!DOCTYPE HTML>
<html>
<head>
<title>Love one another</title>
<style type="text/css">
div {
display: inline-block;
overflow: hidden;
width: 100px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
text-align: center;
}
img {
cursor: grab;
}
img:active {
cursor: grabbing;
}
</style>
<script type="text/javascript">
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>
<div ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://ecudemo142089.cafe24.com/oldClass/mc2/quiz/img/icecon.png" id="img" draggable="true" ondragstart="drag(event)" width="50">
</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
See the Pen YzGNooP by Yoo (@spiegel) on CodePen.
반응형
'HTML' 카테고리의 다른 글
| id 속성 (0) | 2020.12.20 |
|---|---|
| hidden 속성 (0) | 2020.12.20 |
| dir 속성 (0) | 2020.12.18 |
| data-* 속성 (0) | 2020.12.18 |
| contenteditable 속성 (0) | 2020.12.13 |
