<!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(){
$("ul#webtech").sortable();
});
$("input:eq(1)").click(function(){
$("ul#webtech").sortable("destroy");
});
$("input:eq(2)").click(function(){
$("ul#webtech").sortable("enable");
});
$("input:eq(3)").click(function(){
$("ul#webtech").sortable("disable");
});
});
</script>
<style type="text/css">
/*初期デザイン*/
ul#webtech{
border:1px solid #CCCCCC;
padding:20px;
background-color:#CCCCCC;
}
ul#webtech li{
border:2px dashed #CCCCCC;
width:150px;
height:30px;
line-height:30px;
margin:5px;
padding-left:10px;
color:#CCCCCC;
background-color:#EEEEEE;
}
.ui-sortable{
cursor:move;
background-color:#EEEEEE !important;
}
.ui-sortable li{
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;
}
</style>
</head>
<body>
<ul id="webtech">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Webサーバー</li>
</ul>
<input type="button" value="要素を並べ替えられるようにする">
<input type="button" value="sortableを解除する">
<input type="button" value="sortableを有効にする">
<input type="button" value="sortableを無効にする">
</body>
</html>