22. 1. 19.

Javascript 동적 드래그 앤 드롭 레이어 생성

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
    // 시작위치
    var startX = 0;
    var startY = 0;
    // 클릭위치
    var clickX = 0;
    var clickY = 0;
    // 맨앞으로
    var zIndex = 0;
 
    function DragStartFunction(ev,el) {
        if (el.style.left != undefined) {
            startX = el.style.left;
            startX = Number(startX.replace("px", ""));
        }
        if (el.style.top != undefined) {
            startY = el.style.top;
            startY = Number(startY.replace("px", ""));
        }
        clickX = ev.clientX - startX;
        clickY = ev.clientY - startY;
    }
    function DragEndFunction(ev) {
        var moveX = ev.clientX - clickX;
        var moveY = ev.clientY - clickY;
        ev.target.style.left = moveX + "px";
        ev.target.style.top = moveY + "px";
        zIndex++;
        ev.target.style.zIndex = zIndex;
    }
 
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var newDiv = document.createElement("div");
            newDiv.className = "formdiv";
            newDiv.setAttribute("draggable", true);
            newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
            newDiv.setAttribute("ondragend", "DragEndFunction(event)");
            // 구분을 위해 랜덤색상
            newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
            document.getElementById("content").appendChild(newDiv);
        }
    }
</script>
</head>
<body>
    <a id="btn">ADD</a>
    <div id="content"></div>
</body>
</html>
작성자: 시간:
라벨: , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)