문제점
우선 DB에 저장한 좌표값은 문제가 없었다. 그런데 그걸 화면단으로 가져오는 과정에서, 기준점이 되는 div가 있기 때문에 어떻게 표현해야 할까 고민하다가 기준점의 좌표값을 구한 뒤 각 버튼의 좌표값에 더해주는 방식을 선택했다.
이로인해 발생하는 문제점은 다음과 같다.
-
좌표값은 잘 들어온것같은데 같은 y축에 위치한 빨간버튼이 서로 상이한 위치에 있음
-
새로고침을 아래에서 하면 이상한곳(상단)에 버튼이 위치함
좌표관련 함수를 잘 이해하지 못하고 쓴탓일것이다. 코드는 다음과같이 작성했다
let element1 = document.querySelector('#realbody');
let elementTop = element1.getBoundingClientRect().top;
let elementLeft = element1.getBoundingClientRect().left;
function doorDraw(sitId,sitX,sitY) {
$('#realbody').append(' <button type="button" id="'+sitId+'" data-sitId="'+sitId+'" class="btn btn-light" style="width: 200px; height : 20px">Door</button>');
var a = (Number(sitX) + Number(elementLeft))
var b = (Number(sitY) + Number(elementTop))
$( '#'+sitId ).offset( { left: a, top: b } );
let element = document.querySelector('#'+sitId);
console.log("배치후 "+sitId+"의 좌표값 : "+element.getBoundingClientRect().left+", "+element.getBoundingClientRect().top);
}
...생략
Solve
개발자도구로 위 버튼의 위치를 보면 다음과같다
y좌표, 즉 top값을 분명 같게 넣어줬는데 너무도 상이하다!
이를 해결하기 위해서는, 일단 뇌에 새기자!
기준으로 하고싶은
부모div의 position 속성은relative
기준에 따라 움직이는자식div의 속성은absolute
위 내용을 뇌에 새기고 브라우저에서 직접 수정해봤다
부모인 realbody에 relative 속성을 주고, 자식들은 absolute를 주니
틀어지던놈이 제대로 나온다!!!!! 꺅
부모를 기준으로 내가 설정한 top과 left값만큼 이동해준것!
그럼 이를 표현할 코드도 잘 수정해주자
function doorDraw(sitId,sitX,sitY) {
$('#realbody').append(' <button type="button" id="'+sitId+'" data-sitId="'+sitId+'" class="btn btn-light"'+
'style="width: 200px; height : 20px; position: absolute; top:'+sitY+'px; left:'+sitX+'px; ">Door</button>');
}
function sit2Draw(sitId,sitX,sitY) {
$('#realbody').append(' <button type="button" id="'+sitId+'" data-sitId="'+sitId+'" class="btn light btn-danger"'+
'style="width: 80px; height : 50px; position: absolute; top:'+sitY+'px; left:'+sitX+'px; ">'+sitId+'</button>');
}
function sit4Draw(sitId,sitX,sitY) {
$('#realbody').append('<button type="button" id="'+sitId+'" data-sitId="'+sitId+'" class="btn light btn-warning" '+
'style="width: 110px; height : 60px; position: absolute; top:'+sitY+'px; left:'+sitX+'px; ">'+sitId+'</button>');
}
function sit8Draw(sitId,sitX,sitY) {
$('#realbody').append(' <button type="button" id="'+sitId+'" data-sitId="'+sitId+'" class="btn light btn-info" '+
'style="width: 90px; height : 200px; position: absolute; top:'+sitY+'px; left:'+sitX+'px; ">'+sitId+'</button>');
}아예 style 안에 top과 left값도 같이 넣어버렸다!!
결과
DB에 저장된 좌표대로 잘 나온다!!!!! 꺄아아악
추가(2022.09.06)
원래는 그냥 네모칸 안에서 만들던걸
입력받을때도 이런식으로 준비칸(왼쪽)과 설정칸(오른쪽)으로 나누려고 한다.
<body>
<div class="box">
<div class="setting"></div>
<div class="target">
</div>
</div>
<div class="btnDiv">
<button type="button" class="btn btn-light" id="save" onclick="saveBtn()">SAVE</button>
</div>이런식으로 큰 박스와 버튼박스를 세로 정렬하고
큰 박스는 가로로 반으로 나눠서 세팅창과 타겟창으로 나누었다.
.box{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.setting{
width: 200px;
height: 450px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.target {
position: relative;
width: 570px;
height: 450px;
border: 1px solid #dddddd;
background: #fcf9f5;
color: #333333;
font-weight: bold;
}그러고 target만 relative로 설정하면 될줄 알았는데,... 안되는것이다. setting창이 좌표 시작점으로 인식되었다.
확실하진 않지만 띄울땐 relative가 기준요소로 인식되지만, 좌표값을 입력받을땐 그런게 상관 없는것같다.
따라서 해결은 그냥 이전에 시도한것중 하나였던 좌표값 빼버리기로 해결했다! (0,0)의 위치를 (1,1)로 옮기고 싶으면, 그냥 다른 좌표들에사 (1,1)만큼을 빼버리면 되는것 아니겠어~~!!
var x = $('#'+seatId).position().top - $('.target').position().top;
var y = $('#'+seatId).position().left- $('.target').position().left;뭐 이론식으로,,, 타겟만큼의 좌표를 빼줬다
그럼 이렇게 왼쪽 div에만 설정을 해줘도
조회창에 잘뜬다!!
