<!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>
#itemList, #cart
{
width: 500px;
height: 200px;
padding: 5px;
margin: 5px;
border: 3px solid;
}
</style>
</head>
<body>
<h1>이미지 요소 드래그 앤 드롭</h1>
<h3>베스트 셀러 리스트</h3>
<div id="itemList" ondrop="drop(event)" ondragover="dragOver(event)">
<img id="books" src="mfc.jpg" width="100" height="150" hspace = "20px" draggable="true" ondragstart="dragStart(event)"> <!--hspace: item간의 수평간격-->
<img id="books" src="api.jpg" width="100" height="150" hspace = "20px" draggable="true" ondragstart="dragStart(event)">
<img id="books" src="c++.jpg" width="100" height="150" hspace = "20px" draggable="true" ondragstart="dragStart(event)">
</div>
<p></p>
<h3>쇼핑카트</h3>
<div id="cart" ondragover="dragOver(event)" ondrop="drop(event)"></div>
<script>
function dragStart(event) {
event.dataTransfer.setData("books",event.target.id)
}
function dragOver(event) {
//event.prevenDefaulet();
event.preventDefault();
}
function drop(event) {
var targetId = event
.target
.getAttribute("id");
var boxId = event
.dataTransfer
.getData("books");
event
.target
.appendChild(document.getElementById(boxId));
if (targetId == 'cart') {
alert("카트에 도서를 담았습니다.");
} else {
alert("도서를 카트에서 꺼냈습니다..");
event.preventDefault();
}
}
</script>
</body>
</html>
쇼핑카트에서 빼낼때 이미지 씹히는 겨우 발생... 이분분 해결 필요