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>
작성자: 시간: 댓글 없음:
라벨: , ,

22. 1. 13.

웹페이지 페이지 이동(?) 갱신( Javascript History Api )

페이지 이동시 부드럽게 이동하기 위한 방법(=한페이지에서 변화를...)
Javascript 파일(/main.js)
?
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
61
62
63
64
65
// 뒤로가기시 페이지 새로고침
window.onpopstate = function(event) {
    var np = document.location
    BodyClassLoad(np);
}
// 페이지 시작시 a태그의 href 조정(타 도메인일경우 그대로 두고 같은 도메인일 경우 function 으로 처리되도록..)
window.onload = function(){
    var abtn = document.querySelectorAll("a");
    for(var i = 0; i < abtn.length; i++){
        const loc = abtn[i].getAttribute("href");
        if(loc.indexOf("://") == -1){
            MoveHrefClick(abtn[i],loc);
        }else{
            if(loc.indexOf("://"+window.location.origin) > -1){
                MoveHrefClick(abtn[i],loc);
            }
        }
    }
}
// body class 조정 및 section 의 내용 교체
function BodyClassLoad(url){
    var nc = "";
    var mhref = "";
    if(url.origin != undefined){
        nc = url.href.substring(url.origin.length,url.origin.length+url.href.length);
    }else{
        nc = url;
    }
    mhref = nc;
    if(nc.substring(0,1)=="/"){
        nc = nc.substring(1,nc.length);
    }
    if(nc.substring(nc.length-1,nc.length)=="/"){
        nc = nc.substring(0,nc.length - 1);
    }
    nc = nc.replace("/"," ");
    document.querySelector("body").className = "BodyTag "+ nc;
    var xhr = new XMLHttpRequest();
    var loadurl = mhref;
    if(loadurl.indexOf("?") == -1){
        loadurl += "/main.php";
        loadurl = loadurl .replace("//","/");
    }else{
        // PHP 페이지를 불러오도록 상황에 따라 변경
        loadurl = loadurl .replace("?","main.php?");
    }
    xhr.open('GET', loadurl, true);
    xhr.send();
    xhr.onload = function(){
        if (xhr.status == 200) {
            document.querySelector("section").innerHTML = xhr.response;
        } else {
        // 실패
        }
    }
}
// a태그 href 비활성화 및 history 에 이전주소로 기록
function MoveHrefClick(el,href){
    el.removeAttribute("href");
    el.onclick = function(){
        history.pushState({page: 1}, document.title, href);
        BodyClassLoad(href)
         
    }
}
PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...
?
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
<?php
    $relative_path = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
    $pathNode = explode( '/', $relative_path );
    $bodyClass = "BodyTag";
    for( $i = 0;$i < sizeof($pathNode); $i++){
        if($pathNode[$i] != ""){
            $bodyClass .= " ".$pathNode[$i];
        }
    }
    $path1 = "Order";
    $path2 = "";
    $path3 = "";
    if($bodyClass != "BodyTag"){
        if(sizeof($pathNode)>1){
            $path1 = $pathNode[1];
        }
        if(sizeof($pathNode)>2){
            $path2 = $pathNode[2];
        }
        if(sizeof($pathNode)>3){
            $path3 = $pathNode[3];
        }
    }else{
        $bodyClass .= " ".$path1;
    }
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/main.js" defer></script>
</head>
<body class="<?php echo $bodyClass; ?>">
<header><?php include $_SERVER["DOCUMENT_ROOT"]."/header.html"; ?></header>
<section><?php include $_SERVER["DOCUMENT_ROOT"].$relative_path."main.php"; ?></section>
<footer><?php include $_SERVER["DOCUMENT_ROOT"]."/footer.html"; ?></footer>
</body>
</html>
페이지구성(/header.html)
?
1
2
<a href="/">Home</a>
<a href="/A/">A</a>
PHP 구성(/main.php)
?
1
<h2>Home</h2>
PHP 구성(/A/main.php)
?
1
<h2>A</h2>
작성자: 시간: 댓글 없음:
라벨: , , ,
피드 구독하기: 글 (Atom)