<!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.selectable.js"></script>
<script type="text/javascript">
$(function(){
//子要素を選択可能にする
//$("ul#webtech").selectable();
$(".ui-selectable > *").live("selectableselecting",function(){
console.log("要素の選択中");
});
$(".ui-selectable > *").live("selectableselected",function(){
console.log("要素の選択が完了");
});
$(".ui-selectable > *").live("selectableunselecting",function(){
console.log("要素の選択解除中");
});
$(".ui-selectable > *").live("selectableunselected",function(){
console.log("要素の選択解除が完了");
});
$(".ui-selectable > *").live("selectablestart",function(){
console.log("要素の選択を開始");
});
$(".ui-selectable > *").live("selectablestop",function(){
console.log("要素の選択を終了");
});
$("input:eq(0)").click(function(){
$("ul#webtech").selectable();
});
$("input:eq(1)").click(function(){;
$("ul#webtech").selectable("destroy");
});
$("input:eq(2)").click(function(){
$("ul#webtech").selectable("enable");
});
$("input:eq(3)").click(function(){
$("ul#webtech").selectable("disable");
});
$("input:eq(4)").click(function(){
$("ul#webtech").selectable("toggle");
});
});
</script>
<style type="text/css">
/*初期デザイン*/
ul#webtech{
border:1px solid #CCCCCC;
padding:20px;
}
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-selectable{
border:1px solid #000000 !important;
padding:20px !important;
}
/*ui-selectableの子要素*/
.ui-selectee{
border:2px dashed #FF0000 !important;
width:150px !important;
height:30px !important;
line-height:30px !important;
margin:5px !important;
padding-left:10px !important;
color:#000000 !important;
}
/*選択中の要素*/
.ui-selecting{
background-color:#CCFF99 !important;
}
/*選択済みの要素*/
.ui-selected{
background-color:#FFCC99 !important;
font-weight:bold !important;
}
/*選択が解除される要素*/
.ui-unselecting{
background-color:#99CCFF !important;
}
/*selectableが無効になている要素*/
ui-selectable-disabled{
color:#333333 !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="selectableを解除する">
<input type="button" value="selectableを有効にする">
<input type="button" value="selectableを無効にする">
<input type="button" value="selectableを有効／無効を切り替えるにする（？）">
</body>
</html>