jQueryでグループの仕切りをドラッグする
jQuery UI Sortable (+ Something)
ついかっとなってやった。
順番の固定されているグループと、これまた順番の固定されているアイテムに対して「ここからここまでがこのグループなんじゃー」という風に指定するUIを書いてみた。
ドラッグできるのはグループ名のみ。グループの順番を変えられないようにしているのがポイント。
（コピペで動くように下のでスタイルシートがうるさいのは勘弁してください）
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<style>
<!--
ul {
list-style:none;
width:200px;
padding-left:0px;
}
li {
width:200px;
background-color:#ddd;
}
li.item{
border-top: solid 1px #ccc;
}
li.item:hover {
background-color:#e6e6e6;
}
li.item.not_droppable {
background-color:#bbb;
border-top: solid 1px #aaa;
}
li.group {
background-color:#6a9;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
li.group:hover {
background-color:#7ba;
}
li.group:not(:first-child) {
cursor:move;
}
li.group.not_droppable {
background-color:#486;
}
-->
</style>
<script>
$(function(){
$('.container').sortable({
cancel: '.item,.group:first-child',
items: 'li:not(.not_droppable)',
stop: function( event, ui ) {
//TODO change 'name' attributes
}
}).children('li.group:not(:first-child)').mousedown(function(){
var $item = $(this);
$item.nextAll('.group').first().addClass('not_droppable').nextAll().addClass('not_droppable');
$item.prevAll('.group').first().addClass('not_droppable').prevAll().addClass('not_droppable');
}).mouseup(function(){
$(this).siblings().removeClass('not_droppable');
});
});
</script>
</head>
<body>
<ul class="container">
<li class="group">G1</li>
<li class="item">i1</li>
<li class="item">i2</li>
<li class="item">i3</li>
<li class="group">G2</li>
<li class="item">i4</li>
<li class="group">G3</li>
<li class="item">i5</li>
<li class="item">i6</li>
<li class="group">G4</li>
</ul>
</body>
</html>
もっと簡単に出来るかもしれないけど、もう力尽きた。
(5分後追記)もっと簡単に出来た。
(15分後追記)もっと簡単に出来た。
