<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<!--<script type="text/javascript" src="jquery.ui.core.js"></script>-->
<script type="text/javascript" src="jquery.ui.sortable.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
$("div#webtech").sortable({
//並べ替え可能な要素（デフォルトは>）
items:">p",
//移動先を表す要素のCSS設定
placeholder:"sortable-hover"
});
});
$("input:eq(1)").click(function(){
$("div#webtech").sortable("destroy");
});
$("input:eq(2)").click(function(){
$("div#webtech").sortable("enable");
});９
$("input:eq(3)").click(function(){
$("div#webtech").sortable("disable");
});
});
</script>
<style type="text/css">
/*初期デザイン*/
div#webtech{
border:1px solid #CCCCCC;
padding:20px;
background-color:#CCCCCC;
}
div#webtech p{
border:2px dashed #CCCCCC;
width:600px;
height:30px;
line-height:30px;
margin:5px;
padding-left:10px;
color:#CCCCCC;
background-color:#EEEEEE;
}
div#webtech p span.bold{
font-weight:bold;
}
.ui-sortable{
cursor:move;
background-color:#EEEEEE !important;
}
.ui-sortable p{
color:#000000 !important;
border:2px dashed #FF0000 !important;
}
.ui-sortable-disabled{
cursor:auto;
background-color:#CCCCCC !important;
}
.ui-sortable-helper{
cursor:pointer;
background-color:#FFCC99 !important;
}
.sortable-hover{
background-color:#FFFFFF !important;
}
</style>
</head>
<body>
<div id="webtech">
<p>
<span class="bold">HTML</span>
<span class="text">タグでWebページの構造を記述する</span>
</p>
<p>
<span class="bold">CSS</span>
<span class="text">HTMLタグに対応するデザインを設定する</span>
</p>
<p>
<span class="bold">JavaScript</span>
<span class="text">Webページの内容をユーザーの操作などにおうじて追加／変更する</span>
</p>
<p>
<span class="bold">jQuery</span>
<span class="text">CSSセレクタやAjaxに対応したコンパクトなJavaScriptライブラリ</span>
</p>
<p>
<span class="bold">Webサーバー</span>
<span class="text">アクセスしてきたWebブラウザとデータの送受信を行う</span>
</p>
</div>
<input type="button" value="要素を並べ替えられるようにする">
<input type="button" value="sortableを解除する">
<input type="button" value="sortableを有効にする">
<input type="button" value="sortableを無効にする">
</body>
</html>