• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML5 API Drag and Drop</title>
7
    <style>
8
        div {
9
            width: 180px;
10
            height: 280px;
11
            margin: 10px;
12
            padding: 10px;
13
            border: solid 15px #8B4513;
14
            float: left;
15
        }
16
    </style>
17
</head>
18
​
19
<body>
20
​
21
    <h1>드래그 앤 드롭을 이용한 객체의 이동</h1>
22
​
23
    <p>모나리자 그림을 드래그해서 옆의 사각형으로 옮겨보세요!</p>
24
​
25
    <div ondrop="drop(event)" ondragover="dragEnter(event)">
26
        <img id="monalisa" width="180" height="280" src="/examples/images/img_monalisa.png" draggable="true" ondragstart="drag(event)">
27
    </div>
28
    <div ondrop="drop(event)" ondragover="dragEnter(event)"></div>
29
​
30
    <script>
31
        function dragEnter(ev) {
32
            ev.preventDefault();
33
        }
34
​
35
        function drag(ev) {
36
            ev.dataTransfer.setData("text", ev.target.id);
37
        }
38
​
39
        function drop(ev) {
40
            ev.preventDefault();
41
            var data = ev.dataTransfer.getData("text");
42
            ev.target.appendChild(document.getElementById(data));
43
        }
44
    </script>
45
​
46
</body>
47
​
48
</html>