도담도담

드레그앤드롭 (Drag and Drop) 연습 본문

IT 공부/개인정리

드레그앤드롭 (Drag and Drop) 연습

Zinisang 2022. 2. 10. 10:29

사실 딱히 완성된 상태는 아니고

혼자 공부할 겸 인터넷 참고하면서 작업하던거라 많이 미흡하다.

손봐야 할게 많기는 한데 일단 올려두고 추가사항은 천천히 추가해 나가련다.

 

기본 틀형식은 bootstrap에서 참고해서 사용했다.

 

(text 박스가 추가는 되는데 삭제는 아직 구현 못한 상태)

기본 틀이 되는 HTML

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<title>드래그앤드롭</title>
	<link rel="stylesheet" href="../css/dragAndDrop.css">
</head>

<body>
	<form>
		<div id="wholeList" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
			<h2>내용을 입력하고 드레그해서 넣어보세요</h2>
			<div id="listManager">
				<div id="addList" onclick="add_textbox()">+</div>
				<div id="deleteList" onclick="remove()">-</div>
			</div>
			<input type="text" draggable="true" id="text" ondragstart="drag(this, event)">
		</div>
	</form>

	<div class="fl" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
		<h2>Todo</h2>
	</div>
	<div class="fl" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
		<h2>Doing</h2>
	</div>
	<div class="fl" ondrop="drop(this, event);" ondragenter="return false;" ondragover="return false;">
		<h2>Done</h2>
	</div>

	<script src="../js/dragAndDrop.js"></script>
</body>

</html>

 

기능 적용해주는 JS

function drag(target, food) {		//드래그 시작시 호출 할 함수
    food.dataTransfer.setData('Text', target.id);
};
function drop(target, food) {		//드롭시 호출 할 함수
    var id = food.dataTransfer.getData('Text');
    target.appendChild(document.getElementById(id));
    food.preventDefault();
};

const add_textbox = () => {
    const wholeList = document.getElementById("wholeList");
    const newP = document.createElement('p');
    newP.innerHTML = "<input type='text' draggable='true' id='text' ondragstart='drag(this, event)'>";
    wholeList.appendChild(newP);
}
const remove = (obj) => {
    document.getElementById('wholeList').removeChild(obj.parentNode);
}

 

모양 꾸며주는 CSS

div {
    width: 320px;
    height: 320px;
    text-align: center;
    border: 1px solid #000;
    padding: 5px;
    margin: 20px;
}

h2 {
    font-size: .8em;
    color: #000;
    font-weight: bold;
}

.fl {
    float: left;
}

#listManager {
    width: 96%;
    height: 10%;
    margin: 0;
    display: flex;
    /* align-items: right; */
    /* flex-direction: row; */
    justify-content: right;
    border-style: none;

}

#addList {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-right: 10px;
}

#addList:hover {
    background: rgb(141, 141, 224);
    cursor: pointer;
}

#deleteList {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    margin: 0;

}

#deleteList:hover {
    background: rgb(141, 141, 224);
    cursor: pointer;
}

'IT 공부 > 개인정리' 카테고리의 다른 글

자바스크립트로 다음달 자동이체일 확인하기  (0) 2022.02.16
자바스크립트로 나이 계산식 만들기  (0) 2022.02.14
환율계산기 만들어보기  (0) 2022.02.07
== 와 === 의 차이점  (0) 2022.01.25
VS code 단축키  (0) 2022.01.01
'IT 공부/개인정리' Related Articles more
Comments