<!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>
| 
