<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>Drag & Drop</title>
<style type="text/css">
#theDrags { width: 600px; height: 120px; background-color:Yellow; }
.product { width:100px; height:100px; border:1px solid red; display:inline-block; background-color:Green; }
#theDrop { width:200px; height:200px; border:5px solid red; }
.redBorderStart { opacity:0.5; }
.redBorder { opacity:1.0; }
</style>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$('#theDrags').children().draggable(); // 드래그 가능 요소
$('#product1').draggable({ axis: "x", stack: ".ui-draggable", revert: "invalid" }); // 축
$('#product2').draggable({ axis: "y" });
$('#product3').draggable({ containment: "#theDrags", helper: "clone" }); // 포함
$('#product4').draggable({ grid: [50, 100], helper: function () {
return $('<div>가로 50픽셀, 세로 100픽셀 단위로 이동되죠?</div>');
}
}); // 이동단위 설정
$('#product5').draggable({
snap: "#product4, #product3", handle: "a"
}); // 특정 요소에 붙임
// 특정 요소를 한꺼번에 주고자한다면?
$('#product1, #product2, #product3').draggable("option", "stack", ".ui-draggable");
// 드롭될 영역 설정
$('#theDrop').droppable({
accept: "#product4, #product5",
activeClass: "redBorder",
drop: function (event, ui) {
ui.draggable.hide("explode", "slow");
}
});
});
</script>
</head>
<body>
<h1>jQuery UI Interactions</h1>
<h3>Drag & Drop</h3>
<div id="theDrags">
<div class="product" id="product1">상품1</div>
<div class="product" id="product2">상품2</div>
<div class="product" id="product3">상품3</div>
<div class="product" id="product4">상품4</div>
<div class="product" id="product5"><a href="#">상품5</a><p>좋은상품...</p></div>
</div>
<div id="theDrop" class="redBorderStart">
장바구니
</div>
</body>
</html>