이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css를 사용하다보면 자유롭게 엘리먼트를 이동하는 기능을 만들고 싶을 때가 있다.
필자도 그러하였는데 조금 어려운 기술인가 했더니 그렇지는 않은것 같다.
그래서 이번에는 아주 유용한 테크닉인 엘리먼트 자유롭게 옮기기를 선보일 때가 온것 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
</head>
<body>
<div id="drawer" ondrop="drop(event)" ondragover="dragover(event)">
<div id="mydiv" draggable="true" ondragstart="dragstart(event)"></div>
</div>
<script>
let distX;
let distY;
let posX;
let posY;
function dragstart(event) {
posX = event.pageX;
posY = event.pageY;
distX = event.srcElement.offsetLeft - posX;
distY = event.srcElement.offsetTop - posY;
}
function dragover(evnet) {
event.stopPropagation();
event.preventDefault();
}
function drop(event) {
event.stopPropagation();
event.preventDefault();
posX = event.pageX;
posY = event.pageY;
console.log(posX, posY, distX, distY);
$('#mydiv').css('margin-left', posX + distX + 'px')
.css('margin-top', posY + distY + 'px');
}
</script>
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#drawer {
position: relative;
width: 100%;
height: 100%;
background-color: skyblue;
}
#mydiv {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</body>
</html>
코드의 전문이다 뭐 약간은 길이가 되는것 같은데 차근차근 설명하겠다.
#drawer {
position: relative;
width: 100%;
height: 100%;
background-color: skyblue;
}
우리가 컴포넌트를 배치할 공간이다. absolute를 적용시키기 위해서 relative를 걸어준다.
#mydiv {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
절대 좌표로 배치하기위해서 absolute를 걸어준다.
let distX;
let distY;
let posX;
let posY;
dist와 pos는 다른 변수인데 dist는 옮기는 즉시 내 마우스 포인터의 위치와 엘리먼트 변의 거리를 의미한다.
pos는 어느시점이건 간에 현재 나의 마우스 포인터의 위치를 의미한다.
dist를 구하는 이유는 마지막 옮기는 순간에 event.srcElement.offsetLeft나 Top을 호출해봤자 옮기기 직전의 오프셋을 구한다.
그래서 미리 구해놓고 나중에 그 수치만큼 더하기 위해서다.
<div id="mydiv" draggable="true" ondragstart="dragstart(event)"></div>
function dragstart(event) {
posX = event.pageX;
posY = event.pageY;
distX = event.srcElement.offsetLeft - posX;
distY = event.srcElement.offsetTop - posY;
console.log(event)
}
드래그를 시작하는 이벤트다. 당연히 드래그 할 녀석에게 걸어준다.
우리의 예제를 본다면 mydiv에 걸어줘야한다.
보다시피 두 엘리먼트들의 거리를 구하고 있다.
그리고 draggable을 true해 줘야 드래그를 할 수 있다.
<div id="mydiv" draggable="true" ondragstart="dragstart(event)"></div>
function dragover(evnet) {
event.stopPropagation();
event.preventDefault();
}
function drop(event) {
event.stopPropagation();
event.preventDefault();
posX = event.pageX;
posY = event.pageY;
console.log(event)
console.log(posX, posY, distX, distY);
$('#mydiv').css('margin-left', posX + distX + 'px')
.css('margin-top', posY + distY + 'px');
}
이제 끌고 오는것과 내려놓는것 두가지에 이벤트를 만든다.
끌고 올때 이벤트전파와 기본이벤트 동작을 막기 위해서(즉 다른 이벤트를 배제하기 위해서) 두 메소드를 걸어준다.
반드시 필요한 작업이다.
그리고 내려 놓을 때는 다시 그만큼길이를 역계산해서 마진을 줘서 엘리먼트를 옮겨준다.
결과는 아래와 같다.