웹 포스기 테이블 드래그앤드롭

비운의 포스기이다.. 

이걸 담당하시던분이 중도하차를 하셔서 정말 힘들었다. 다들 첫 프로젝트고 전공자도 없었기에 본인 일도 벅찼기 때문에 갑자기 이 파트를 역할을 나누기도 애매했다.

그래서 나는 내가 조장으로 하는 프로젝트가 미완성으로 남는게 너무 싫어서 최대한 내꺼를 빠르게 필요기능만 마무리하고 내가 하려고했다. 하지만 생각보다 드래그앤드롭에서 시간을 많이잡아먹었고 결국 드래그앤 드롭만 만들어진채 완성하지 못했다.

차라리 테이블 위치를 바꾸고 저장하는걸 하지말고 메뉴등록과 결제쪽을 신경써서 해볼껄 그랬다.

 

우선 매장관리에서 웹포스기 버튼을 누르면 새 창이 열리고 해당 웹포스기가 등장한다. 

그리고 첫 화면은 db에 기록된 테이블들의 좌표정보를 가지고 div를생성해 유저에게 보여준다.

그리고 이제 이 화면에서 메뉴를 등록하고 하려고했으나 결국 테이블 위치 CRUD밖에 완성하지 못했다.

 

설정버튼을 누르고 나면 오른쪽 아래 버튼 리스트가 생기고, 테이블을 포스기 내에서 자유롭게 위치를 바꿀 수 있다.

테이블은 6개까지밖에 추가하지 못하고 테이블을 선택하고 삭제 또한가능하다. 그리고 저장을 누르면 현재 상태를 DB에 기록한다. 

여러 블로그를 많이 찾아보다가 굉장히 좋은 참고자료가 있었는데, 지금 링크를 걸어두려고 찾아보니 보이지 않는다.

스티커 드래그앤 드롭이었는데.. 미안합니다 출처를 밝혀야하는데

 

테이블들은 모두 a태그이고 저장을 누르면 절대위치로 해당 div의 왼쪽과 오른쪽에서 얼마나 거리가 있는지를 계산해서 db에 기록한다.

 

정말 힘들었고 드래그앤 드롭이 이렇게 수작업으로 하는건지 몰랐다. 뭔가 기가막힌 라이브러리가 있을줄 알았는데,..

그래도 끝나고 가장 뿌듯했던 작업이었다. 

$(function(){
	document.querySelectorAll(".table").forEach((element)=>{
		 element.setAttribute('draggable','true');
		element.addEventListener("dragstart", (event)=>{
			const objectId = event.target.id; // 해당 객체의 ID 값을 가져옴
		    const posX = event.offsetX;
		    const posY = event.offsetY;
		    event.dataTransfer.setData("text/plain", objectId+","+posX+","+posY); // 드래그하는 요소의 ID 값을 설정하여 데이터 전송 준비
		});
	});
	
	document.querySelector("#tableView").addEventListener("dragover",(event)=>{
		event.preventDefault();
		event.stopPropagation();
	});

	document.querySelector("#tableView").addEventListener("drop", (event)=>{
		event.preventDefault();
		event.stopPropagation();
		
		const tableViewOffSet = $('#tableView').offset();
		const relativeX = event.pageX - tableViewOffSet.left;
		const relativeY = event.pageY - tableViewOffSet.top;
		
		var [id, posX, posY] = event.dataTransfer.getData("text/plain").split(",");
		console.log(id);
		$('#' + id).css('left', (relativeX-parseInt(posX)) + 'px');
		$('#' + id).css('top', (relativeY-parseInt(posY)) + 'px');
	});
	$(document).on('click', '.table', function() {
	    $('.table').removeClass('selected');
	    $(this).addClass('selected');
	});
	
});//documentReady
function addTable() {
	var linkCount = $('#tableView a').length;
	if(linkCount>5){
		alert('테이블은 6개 까지 추가 가능합니다.');
	}else{
		const existingIds = new Set(); // 이미 존재하는 테이블의 ID를 저장하기 위한 Set
	    // 이미 존재하는 테이블의 ID를 확인하여 Set에 추가
	    $('#tableView a').each(function() {
	        existingIds.add($(this).attr('id'));
	    });
	    // 사용되지 않은 ID를 찾아서 새로운 테이블에 할당
	    let newId;
	    for (let i = 1; i <= linkCount + 1; i++) {
	        newId = 'table' + i;
	        if (!existingIds.has(newId)) {
	            break;
	        }
	    }
    // 새로운 <a> 태그 생성
    const newLink = document.createElement('a');
    newLink.textContent = newId; // 링크 텍스트 설정
    newLink.setAttribute('class','table');
    newLink.setAttribute('draggable','true');
    newLink.setAttribute('href', '#'); // 링크 URL 설정
	newLink.setAttribute('id',newId);
    newLink.addEventListener("dragstart", (event) => {
	    const objectId = event.target.id; // 해당 객체의 ID 값을 가져옴
	    const posX = event.offsetX;
	    const posY = event.offsetY;
	    event.dataTransfer.setData("text/plain", objectId+","+posX+","+posY); // 드래그하는 요소의 ID 값을 설정하여 데이터 전송 준비
    });
    // 새로운 <a> 태그를 tableView 안에 추가
    $('#tableView').append(newLink);
	}
}
function deleteTable() {
	const selectedTable = document.querySelector('.table.selected');
    if (selectedTable) {
        const tableId = selectedTable.id; // 선택된 테이블의 ID 값을 가져옴
        selectedTable.remove();

        // 선택된 테이블의 ID 값을 URL에 추가하여 페이지 이동
        location.href = 'deleteTable.do?tableName=' + encodeURIComponent(tableId) +'&id='+${loginUser.id};
    } else {
        alert('삭제할 테이블을 선택하세요.');
    }
}
function saveTable(){
	if(Count ==0){
		alert("테이블이 존재하지 않습니다.");
	}else{
	var userId= $('#userId').val();
	var jarr = new Array();// 테이블 객체 담을 배열
	var Count = $('#tableView a').length;
	var i;
	for(i=1; i<=Count; i++){
	var job = new Object();
	job.tableName = 'table'+i;
	console.log(job.tableName);
	job.tableX=$('#table'+i).css('left');
	console.log(job.tableX);
	job.tableY=$('#table'+i).css('top');
	console.log(job.tableY);
	job.userId = userId;
	jarr.push(job);
	};
	$.ajax({
		url: "saveTableXY.do",
		type: 'post',
		data: JSON.stringify(jarr),
		contentType: "application/json; charset=utf-8",
		success: function(result){
			alert("요청 성공 : " + result);				
		},
		error: function(request, status, errorData){
			console.log("error code : " + request.status
					+ "\nMessage : " + request.responseText
					+ "\nError : " + errorData);
		}
	}); //ajax

 

# Controller

@RequestMapping("saveTableXY.do")
	public void saveTableMethod(@RequestBody String tableArray) throws ParseException{
		JSONParser jparser = new JSONParser();
		JSONArray jarr = (JSONArray)jparser.parse(tableArray);
		for(int i=0; i<jarr.size(); i++) {
			JSONObject job = (JSONObject)jarr.get(i);
			Table table = new Table();
			table.setTableName((String)job.get("tableName"));
			String strX = (String) job.get("tableX");
			String strY = (String)job.get("tableY");
			String strX2 = strX.substring(0, strX.length()-2);  //px 자르기
			String strY2= strY.substring(0, strY.length()-2);  //px 자르기
			
			table.setTableX(Double.parseDouble(strX2));
			table.setTableY(Double.parseDouble(strY2));
			table.setId(Integer.parseInt((String) job.get("userId")));
			
			int result = posService.insertTableInfo(table);
			}
	}