카테고리 없음
HTML5 드래그 & 드랍
Canyi
2022. 10. 28. 15:38
드래그하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드래그</title>
<style>
#box1, #box2, #box3
{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#box1{
background-color: red;
}
#box2{
background-color: green;
}
#box3{
background-color: blue;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 드래그</h2>
<div id="box1" draggable="true" ondragstart="dragStart(event)" ondrag = "dragging(event)" ondragend="dragEnd(event)"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="result"></div>
<script>
function dragStart(event) {
//alert("드래그가 시작되었습니다.");
document.getElementById("result").innerHTML = "드래그가 시작되었습니다.";
}
function dragging(event) {
document.getElementById("result").innerHTML = "드래그중입니다.";
}
function dragEnd(event) {
//alert("드래그가 끝났습니다.");
document.getElementById("result").innerHTML = "드래그가 끝났습니다.";
}
</script>
</body>
</html>
드래그해서 div target 영역에 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드래그</title>
<style>
#box1, #box2, #box3
{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#box1{
background-color: red;
}
#box2{
background-color: green;
}
#box3{
background-color: blue;
}
#target{
width: 500px;
height: 200px;
padding: 5px;
margin: 5px;
border: 3px solid;
background-color: gray;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box1" draggable="true" ondragstart="dragStart(event)" ondrag = "dragging(event)" ondragend="dragEnd(event)"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="result"></div>
<div id= "target" ondragenter="dragEnter(event)" ondragover="dragOver(event)" ondragleave="dragLeave(event)"></div>
<script>
//target 함수
function dragEnter(event) {
//document.getElementById("result").innerHTML = "Target 영역에 진입하였습니다.";
alert("Target 영역에 진입하였습니다.");
}
function dragOver(event) {
document.getElementById("result").innerHTML = "Target 영역 위에 있습니다.";
}
function dragLeave(event) {
document.getElementById("result").innerHTML = "Target 영역을 벗어났습니다.";
}
</script>
</body>
</html>
target box에 drag & drop (red, green만)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드래그</title>
<style>
#box1,
#box2,
#box3 {
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#box1 {
background-color: red;
}
#box2 {
background-color: green;
}
#box3 {
background-color: blue;
}
#target {
width: 500px;
height: 200px;
padding: 5px;
margin: 5px;
border: 3px solid;
background-color: gray;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box" ondrop="drop(event)" ondragover="dragOver(event)">
<div id="box1" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box2" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
<div id="target" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<div id="result"></div>
<script>
//target 함수
function dragOver(event) {
document
.getElementById("result")
.innerHTML = "Target 영역 위에 있습니다.";
event.preventDefault();
}
//드래그 시작
function dragStart(event) {
console.log(event);
event
.dataTransfer
.setData("Text", event.target.id);
}
//드롭 시작
function drop(event) {
var targetId = event
.target
.getAttribute("id");
var boxId = event
.dataTransfer
.getData("Text");
event
.target
.appendChild(document.getElementById(boxId));
if (targetId == 'target') {
alert("target에 drop되었습니다");
} else {
alert("원래 영역에 drop되었습니다");
event.preventDefault();
}
}
</script>
</body>
</html>
div box로 box 1,2,3을 묶어놓음
빨간 div box1을 원래 영역으로 드래그를 할 경우
div box 영역에서 div부분만 전환
div만 영역에서 변환
다만 Target 영역에 사각형을 모두 드래그 드랍을 할 경우 box div가 줄어져서 밀림현상이 발생
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드래그</title>
<style>
#box1,
#box2,
#box3 {
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#box1 {
background-color: red;
}
#box2 {
background-color: green;
}
#box3 {
background-color: blue;
}
#box
{
border: 5px solid coral;
}
#target {
width: 500px;
height: 200px;
padding: 5px;
margin: 5px;
border: 3px solid;
background-color: gray;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box" ondrop="drop(event)" ondragover="dragOver(event)" >
<div id="box1" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box2" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
<div id="target" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<div id="result"></div>
<script>
//target 함수
function dragOver(event) {
document
.getElementById("result")
.innerHTML = "Target 영역 위에 있습니다.";
event.preventDefault();
}
//드래그 시작
function dragStart(event) {
console.log(event);
event
.dataTransfer
.setData("Text", event.target.id);
}
//드롭 시작
function drop(event) {
var targetId = event
.target
.getAttribute("id");
var boxId = event
.dataTransfer
.getData("Text");
event
.target
.appendChild(document.getElementById(boxId));
if (targetId == 'target') {
alert("target에 drop되었습니다");
} else {
alert("원래 영역에 drop되었습니다");
event.preventDefault();
}
}
</script>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
overflow - CSS: Cascading Style Sheets | MDN
The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
developer.mozilla.org
이럴 경우 css #target부분에 overflow: auto; 라는 스타일 추가하면 밀림 현상은 방지 할수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드래그</title>
<style>
#box1,
#box2,
#box3 {
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#box1 {
background-color: red;
}
#box2 {
background-color: green;
}
#box3 {
background-color: blue;
}
#box
{
border: 5px solid coral;
}
#target {
width: 500px;
overflow: auto;
height: 200px;
padding: 5px;
margin: 5px;
border: 3px solid;
background-color: gray;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box" ondrop="drop(event)" ondragover="dragOver(event)" >
<div id="box1" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box2" draggable="true" ondragstart="dragStart(event)"></div>
<div id="box3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
<div id="target" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<div id="result"></div>
<script>
//target 함수
function dragOver(event) {
document
.getElementById("result")
.innerHTML = "Target 영역 위에 있습니다.";
event.preventDefault();
}
//드래그 시작
function dragStart(event) {
console.log(event);
event
.dataTransfer
.setData("Text", event.target.id);
}
//드롭 시작
function drop(event) {
var targetId = event
.target
.getAttribute("id");
var boxId = event
.dataTransfer
.getData("Text");
event
.target
.appendChild(document.getElementById(boxId));
if (targetId == 'target') {
alert("target에 drop되었습니다");
} else {
alert("원래 영역에 drop되었습니다");
event.preventDefault();
}
}
</script>
</body>
</html>