[WebDevCurriculum] drag

Hyo Kyun Lee·2021년 10월 27일

WebDevCurriculum

목록 보기

9/44

1. 화면영역

client 영역 : 사용자에게 보여지는 영역
Page 영역 : 전체 문서를 일컫는 영역, client 영역에 따라 사용자에게 안보여지는 영역이 존재 가능.
※ offset 영역 : 특정 객체나 이벤트 대상을 선택하였을때, 해당 대상의 원점을 기준으로 변위를 나타내는 영역

2. 좌표개념

drag를 비롯한 mouse event들은 좌표 개념에 대한 이해가 먼저 필요하다.

ScreenX, ScreenY : 컴퓨터 전체화면의 왼쪽 꼭대기를 기준으로 한 마우스 X,Y 값.
PageX, PageY : 전체문서의 왼쪽 꼭대기를 기준으로 한 마우스 X,Y 값.
※ scroll bar의 움직임에 좌표값이 영향을 받는다.
ClientX, ClientY : 사용자에게 보여지는 문서(웹페이지 화면)를 기준으로 한 마우스 X,Y 값.
※ scroll bar의 움직임에 좌표값이 영향을 받지 않는다.
offsetX, offsetY : 특정객체, event가 더해진 영역을 기준으로 한 마우스 X,Y 값.

3. CSS position

drag event(object move)를 작동하기 위해 좌표설정(position) 개념을 이해한다.

default(static) position : 객체의 x,y 좌표를 변화없이 그대로 유지한다.
relative position : 객체의 상대적 위치를 기준으로 좌표를 결정한다.
absolute position : 객체의 상위(부모) class 및 component 위치를 기준으로 좌표를 결정한다.
fixed position : 전체화면(Screen)을 기준으로 좌표를 결정한다.

4. 주요 method

addEventListener, 개별적인 객체(QuerySelector)에 대해 mouse event를 추가 모두 가능하다.

mousedown : 마우스를 눌렀을때(떼기전) 이벤트가 발생한다.
mousemove : 마우스를 클릭한 상태에서 움직일때 이벤트가 발생한다.
mouseup : 마우스를 떼었을때 이벤트가 발생한다.
※ e.target.style.transform : 정의해준 좌표변화량만큼 선택한 개체를 움직일 수 있다.

4-1. element 1개에 대한 drag logic

객체정의

event를 추가할 객체 정의

let section = document.querySelector('.desktop')
let container = section.querySelector('.container');
let box = container.querySelector('.box')

객체에 대한 mousedown/mousemove/mouseup을 활용하여 drag logic 구현

let isClicked = false;
let offsetX, offsetY = 0;

		container.onmousedown = function(e){
				//box를 선택하였을때만
			if(e.target == box){
				isClicked = true;
              
				offsetX = e.offsetX;
				offsetY = e.offsetY;
			}
		}

				//box가 종속되어있는 부모영역(DOM)에서 움직일 경우에 반응
				//box 객체에 대해서는 mousemove event에 반응하여 움직임
		container.onmousemove = function(e){
			if(isClicked){
				box.style.position = 'absolute';
				box.style.left = e.pageX - offsetX + 'px';
				box.style.top = e.pageY - offsetY + 'px';
			}else{
				return ;
			}

		container.onmouseup = function(e){
			isClicked = false;
		}

4-2. event target 정보확보의 중요성

위 logic에서 if(e.target == box) 부분을 적용하면 선택한 객체의 속성이 box라 하여도, 가장 최상위 객체(위에 있는 block)에 대해서만 event 적용이 가능하다.
선택할 객체가 여러개일 경우 반드시 객체 모두 이벤트가 적용받을 수 있도록 logic을 구성해야 한다.

4-3. 여러개의 elements에 대한 drag logic

객체정의

let section = document.querySelector('.desktop')
let container = section.querySelector('.container');
let box = container.querySelector('.box')

현재 이벤트가 적용될(선택된) 객체 정보를 저장할 변수 선언


let isClicked = false;
let offsetX, offsetY = 0;
let currentObject = null;

currentObject를 활용하여 모든 객체에 event를 적용할 수 있도록 설정

여기서의 핵심은 mousemove event의 적용대상을 현재 선택된 대상, current(e.target)으로 설정해주어야 한다는 점이다.

container.onmousedown = function(e){
		//box를 선택하였을때만
					
		isClicked = true;

		offsetX = e.offsetX;
		offsetY = e.offsetY;

		current = e.target;
					
	}

	//box가 종속되어있는 부모영역(DOM)에서 움직일 경우에 반응
	//box 객체에 대해서는 mousemove event에 반응하여 움직임
	container.onmousemove = function(e){
		if(isClicked){
			current.style.position = 'absolute';
			current.style.left = e.pageX - offsetX + 'px';
			current.style.top = e.pageY - offsetY + 'px';
		}else{
			return ;
		}

	container.onmouseup = function(e){
		isClicked = false;
	}
   }