<!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(){
$("input:eq(0)").click(function(){
$("ul#webtech").selectable({
filter:"li",
tolerance:"touch",
autoRefresh:true,
//子要素が選択中になった時に行う内容（ui-selectingクラスが追加された時）
selecting:function(event,ui){
console.log($(".ui-selecting",ui.selectable).map(function(){
return $(this).html();
}).get().join());
//console.log(ui.options);
console.log(ui.selecting);
},
//子要素が選択された直後に行う内容（ui-selectedクラスに変更された時）
selected:function(event,ui){
console.log($(".ui-selected",ui.selectable).map(function(){
return $(this).html();
}).get().join());
//console.log(ui.options);
console.log(ui.selected);
},
//要素の選択が解除されるときに行う内容
unselecting:function(event,ui){
console.log($(".ui-unselecting",ui.selectable).map(function(){
return $(this).html();
}).get().join());
//console.log(ui.options);
console.log(ui.unselecting);
},
//要素の選択が解除されたあとに行う内容
unselected:function(event,ui){
console.log($(".ui-unselected",ui.selectable).map(function(){
return $(this).html();
}).get().join());
if($(".ui-selected",ui.selectable).size() < 1){
console.log("選択されていません");
}
//console.log(ui.options);
console.log(ui.unselected);
},
//選択された直後に行う内容
start:function(event,ui){
/*
console.log($(".ui-start",ui.selectable).map(function(){
return $(this).html();
}).get().join());
*/
//console.log(ui.options);
},
//選択が終了した直後に行う内容
stop:function(event,ui){
/*
console.log($(".ui-stop",ui.selectable).map(function(){
return $(this).html();
}).get().join());
*/
//console.log(ui.options);
}
});
});
$("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>