<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Drag and Drop Demo</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.load("jqueryui", "1.7");
// $(document).ready(function() {
google.setOnLoadCallback(function() {
$('#main').css('-moz-user-select', 'none'); //禁止fx選取文字
$('#main').get(0).onselectstart = function(){return false;}; //禁止IE選
取文字
$(".block").draggable({revert:true}); //放開區塊回復原位
// 所有課程
$("#allCourse").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append($(ui.draggable));
}
});
// 我的課程
$("#myCourse").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append($(ui.draggable));
}
});
});
function save() {
var element = $('#myCourse > .block');
var val = '';
for (var i = 0; i < element.length; i++) {
val += element[i].id + "\n";
}
alert("您選擇的項目是：\n" + val);
}
</script>
<style type="text/css">
h2 {
color:#79B933;
border-bottom:2px solid #f6f6f6;
margin:5px;
text-align:center;
}
#main {
margin:0 auto;
width:690px;
height:560px;
text-align:center;
}
#myCourse {
float:left;
width:335px;
min-height:560px;
height:auto !important; /* fix for IE6 */
height:560px;
background-color:#dedede;
}
#allCourse {
float:right;
width:335px;
min-height:560px;
height:auto !important; /* fix for IE6 */
height:560px;
background-color:#dedede;
}
.block {
width:300px;
height:40px;
background-color:#ff9;
margin:5px auto;
border:1px solid #999;
line-height:40px;
font-size:13px;
text-align:center;
cursor:move;
}
</style>
</head>
<body>
<div id="main">
<input type="button" value="儲存" onclick="save()" />
<div id="myCourse">
<h2>我的課程</h2>
</div>
<div id="allCourse">
<h2>可選的課程</h2>
<div class="block" id="A1">國文(一) [A1]</div>
<div class="block" id="A2">國文(二) [A2]</div>
<div class="block" id="B1">微積分(一) [B1]</div>
<div class="block" id="B2">微積分(二) [B2]</div>
<div class="block" id="C1">計算機概論 [C1]</div>
<div class="block" id="D1">工程數學 [D1]</div>
<div class="block" id="E1">計算機組織與結構 [E1]</div>
<div class="block" id="F1">演算法 [F1]</div>
<div class="block" id="G1">網路程式設計 [G1]</div>
<div class="block" id="H1">嵌入式系統 [H1]</div>
</div>
</div>
</body>
</html>
| 