반응형
<html>
<head>
<title>Drag and Drop</title>
<style type="text/css">
#c50,#c100,#c500,#c1000,#item1,#item2,#item3,#item4 {
border: 3px dashed #999;
padding: 3px;
width: 50px;
height: 50px;
padding: 1px;
position: absolute;
}
#c50 {
margin: 40 100 100 10;
background-color: orange;
}
#c100 {
margin: 120 100 100 10;
background-color: green;
}
#c500 {
margin: 220 100 100 10;
background-color: gray;
}
#c1000 {
margin: 300 100 100 10;
background-color: violet;
}
#item1 {
margin: 40 100 100 400;
background-color: orange;
}
#item2 {
margin: 120 100 100 400;
background-color: green;
}
#item3 {
margin: 220 100 100 400;
background-color: gray;
}
#item4 {
margin: 300 100 100 400;
background-color: violet;
}
#boxdrop {
border: 3px dashed #999;
background-color: brown;
padding: 3px;
width: 200px;
height: 200px;
margin: 40 100 100 100;
position: absolute;
}
#statusbox {
border: 3px dashed #999;
background-color: gray;
padding: 3px;
width: 260px;
height: 200px;
margin: 400 400 400 10;
position: absolute;
float: left;
}
#pulsbox {
border: 3px dashed #999;
background-color: red;
padding: 3px;
width: 150px;
height: 50px;
margin: 400 800 800 400;
position: absolute;
float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<script type="text/javascript">
function regexNum(val) {
var var_normalize = /[^0-9]/gi;
if (var_normalize.test(val) == true) {
var v_result = val.replace(var_normalize, '');
return v_result;
} else {
return val;
}
}
function putCoin(element) {
var val = regexNum(element);
for (key in coinArray) {
if (element == key) {
coinArray[key]++;
break;
}
}
myAsset -= parseInt(val);
return val;
}
function outCoin(element) {
var val = regexNum(element);
for (key in coinArray) {
if (element == key) {
coinArray[key]--;
break;
}
}
myAsset += parseInt(val);
return val;
}
function cancelEvent(e) {
e = e ? e : window.event;
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
function addEvent(type, el, handler, bubbling) {
if (document.addEventListener) {
document.addEventListener(type, handler, bubbling);
} else if (document.attachEvent) {
el.setCapture();
el.attachEvent("on" + type, handler);
}
}
function removeEvent(type, el, handler, bubbling) {
if (document.removeEventListener) {
document.removeEventListener(type, handler, bubbling);
} else if (document.detachEvent) {
el.detachEvent("on" + type, handler);
el.releaseCapture();
}
}
function itemClick(event) {
var selectedItem = event.srcElement;
alert(selectedItem.id);
}
function mouseDown(event) {
var elementPuls = document.getElementById(pulsBox);
var elementToDrag = event.srcElement;
var targetNode = document.getElementById(dropArea);
var elementToDrag2 = isCloneable(elementToDrag)
&& elementToDrag.cloneNode(true);
document.body.appendChild(elementToDrag2);
var startX = event.clientX, startY = event.clientY;
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
var deltaX = startX - origX, deltaY = startY - origY;
addEvent("mousemove", elementToDrag, moveHandler, true);
addEvent("mouseup", elementToDrag, upHandler, true);
cancelEvent(event);
function isCloneable(element) {
for ( var i in coins) {
if (element.id == coins[i]) {
return true;
} else
false;
}
}
function computeDistance(e) {
e = e ? e : window.event;
var t1 = targetNode.offsetLeft;
var t2 = t1 + targetNode.offsetWidth;
var t3 = targetNode.offsetTop;
var t4 = t3 + targetNode.offsetHeight;
var hasComeIn = (t1 < e.clientX) && (t2 > e.clientX)
&& (t3 < e.clientY) && (t4 > e.clientY);
var worth = putCoin(elementToDrag.id.toString());
if (hasComeIn) {
sum += parseInt(worth);
if (sum >= 3000) {
sum -= parseInt(worth);
outCoin(elementToDrag.id.toString());
document.getElementById(statusBox).innerHTML += "3000원 이상 넣을 수 없습니다.<br/>";
} else {
document.getElementById(statusBox).innerHTML += worth
+ "원을 넣었습니다.<br/>";
}
if (coinArray.c1000 > 1) {
sum -= parseInt(worth);
document.getElementById(statusBox).innerHTML += "지폐를 2장 이상 넣을 수 없습니다. "
+ parseInt(worth) + "을 반출합니다. <br/>";
outCoin(elementToDrag.id.toString());
}
} else {
document.getElementById(statusBox).innerHTML += "돈을 떨어뜨리셨습니다. <br/>";
}
elementPuls.value = "지갑 자금: " + myAsset + "원";
elementToDrag2.style.visibility = 'hidden';
document.body.removeChild(elementToDrag2);
document.getElementById(statusBox).scrollTop = document
.getElementById(statusBox).scrollHeight;
return cancelEvent(e);
}
function moveHandler(e) {
e = e ? e : window.event;
elementToDrag2.style.visibility = 'visible';
elementToDrag2.style.margin = '0 0 0 0 ';
elementToDrag2.style.left = (e.clientX - deltaX) + "px";
elementToDrag2.style.top = (e.clientY - deltaY) + "px";
return cancelEvent(e);
}
function upHandler(e) {
e = e ? e : window.event;
computeDistance(e);
removeEvent("mouseup", elementToDrag, upHandler, true);
removeEvent("mousemove", elementToDrag, moveHandler, true);
return cancelEvent(e);
}
}
function setupEvents() {
for ( var dragobj in coins) {
addEvent("mousedown", document.getElementById(dragobj), mouseDown,
true);
}
for ( var clickObj in items) {
addEvent("mousedown", document.getElementById(clickObj), itemClick,
true);
}
}
var coins = [ "c50", "c100", "c500", "c1000" ];
var items = {
"item1" : 300,
"item2" : 200,
"item3" : 600,
"item4" : 700
};
var dropArea = "boxdrop";
var statusBox = "statusbox";
var pulsBox = "pulsbox";
var sum = 0;
var myAsset = 10000;
var coinArray = {
c50 : 0,
c100 : 0,
c500 : 0,
c1000 : 0
};
function item(title, price, stock) {
this.stock = stock;
this.price = price;
itemFront.apply(this, arguments);
this.getStock = function() {
return "재고가 " + this.stock + " 남았습니다.";
}
}
function itemFront(title) {
this.title = title;
this.getPrice = function() {
for ( var key in items) {
alert(items[key] + " ," + key);
}
}
}
function tune(title, type) {
this.title = title;
this.type = type;
this.getTitle = function() {
return "Song : " + this.title + " Type: " + this.type;
};
}
function artist_tune(title, type, artist) {
this.artist = artist;
this.toString("Artist is " + artist);
tune.apply(this, arguments);
this.toString = function() {
return "Artist : " + this.artist + " " + this.getTitle();
};
}
artist_tune.prototype = new tune();
item.prototype = new item();
var itemS = new item("asdf",1000,2);
alert(itemS.getPrice());
var song = new artist_tune("I want to hold your body", "rock", "Smith");
//alert(song.toString());
window.onload = setupEvents;
</script>
</head>
<body>
<div id="c50">50원</div>
<div id="c100">100원</div>
<div id="c500">500원</div>
<div id="c1000">1000원</div>
<div id="item1">item1</div>
<div id="item2">item2</div>
<div id="item3">item3</div>
<div id="item4">item4</div>
<div id="boxdrop">투입구</div>
<div id="statusbox"
style="overflow: auto; width: 300px; height: 150px; padding: 10px; background-color: gold;"></div>
<input type="text" id="pulsbox"/ >
</body>
</html>
반응형