[WebDevCurriculum] drag

1.画面領域

2.座標概念

3. CSS position

4.主な方法

4-1. 要素のドラッグロジック

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

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. イベントターゲット情報の取得の重要性

4-3. 複数の要素のドラッグロジック

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;

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;
	}
   }

5.参照リンク