Going for a sort-of Windows explorer-style drag-and-drop folder behavior here. The "// make chapter items droppable" block isn't working - specifically, it's not appending the draggable to the dragged folder's list.
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<style>
ul
{
margin: 0;
padding: 0;
}
ul#chapter_list
{
background: #fff;
}
#chapter_list li
{
list-style-type: none;
position: relative;
}
#chapter_list li .sortable_handle
{
cursor: move;
padding: 2px .5em 5px 5px;
position: relative;
top: -2px;
left: -5px;
}
span.chapter_title
{
cursor: pointer;
padding-left: 36px !important;
background: url(http://www.openwebgraphics.com/resources/data/2296/22x22_folder_orange_open.png) no-repeat 8px 50%;
}
.comic_chapter div, .comic_page
{
border: 2px solid black;
margin-bottom: 1px;
padding: 3px 5px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
li.comic_chapter ul
{
padding: 2px 2px 2px 1em;
margin: 3px;
}
#chapter_list li.drop_highlight div
{
background: darkBlue;
color: white;
}
.comic_chapter div
{
background: LightBlue;
}
.comic_page
{
background: #fff;
}
.chapter-placeholder
{
border: 2px dashed LightBlue;
margin: 2px;
}
.page-placeholder
{
height: 1.6em;
border: 2px dashed #666;
margin: 2px;
}
</style>
</head>
<body>
<script type="text/javascript" />
var chapter_list = {
0 : {
'chapter_title' : 'Un-Chaptered',
'chapter_pages' : {}
},
1 : {
'chapter_title' : 'Chapter 1',
'chapter_pages' : {
1 : {
'page_title' : 'Page 1'
},
2 : {
'page_title' : 'Page 2'
},
3 : {
'page_title' : 'Page 3'
},
4 : {
'page_title' : 'Page 4'
},
5 : {
'page_title' : 'Page 5'
},
6 : {
'page_title' : 'Page 6'
}
}
},
2 : {
'chapter_title' : 'Chapter 2',
'chapter_pages' : {
7 : {
'page_title' : 'Page 7'
},
8 : {
'page_title' : 'Page 8'
},
9 : {
'page_title' : 'Page 9'
},
10 : {
'page_title' : 'Page 10'
}
}
},
3 : {
'chapter_title' : 'Chapter 3',
'chapter_pages' : {
11 : {
'page_title' : 'Page 11'
},
12 : {
'page_title' : 'Page 12'
}
}
}
};
document.write('<ul id="chapter_list">');
for (i in chapter_list) {
chapter = chapter_list[i];
document.write('<li id="chapter_' + i + '" class="comic_chapter">' +
'<div>' +
'<span class="sortable_handle">||</span>');
if (i > 0) document.write('<input type="checkbox" />');
document.write('<span class="chapter_title">' + chapter.chapter_title + '</span>' +
'</div>' +
'<ul id="chapter_' + i + '_pages">');
for (n in chapter.chapter_pages) {
page = chapter.chapter_pages[n];
document.write('<li id="page_' + n + '" class="comic_page">' +
'<span class="sortable_handle">||</span>' +
'<label for="page_' + n + '_chk">' +
'<input type="checkbox" id="page_' + n + '_chk" />' +
' <span class="page_title">' + page.page_title + '</span>' +
'</label>' +
'</li>');
}
document.write('</ul>' +
'</li>');
}
document.write('</ul>');
</script>
<div id="debug"></div>
<script type="text/javascript">
// hide Chapter contents
$('.comic_chapter ul').hide();
// add onClick => toggle chapter-contents visibility
$('.chapter_title').bind('click', function(e){
$(this).parents('li.comic_chapter').children('ul').toggle();
});
// make Chapters sortable
$('#chapter_list').sortable({
handle: 'div .sortable_handle',
placeholder: 'chapter-placeholder',
forcePlaceholderSize: true
}).disableSelection();
// make Pages sortable
$('.comic_chapter ul').sortable({
handle: '.sortable_handle',
placeholder: 'page-placeholder',
connectWith: '.comic_chapter ul' // allow pages to be dragged between chapters
}).disableSelection();
$('.comic_chapter ul').droppable({
greedy: true
});
// make chapter items droppable
$('#chapter_list').children('li').droppable({
accept: '.comic_page',
hoverClass: 'drop_highlight',
drop: function(e, ui) {
$(this).children('ul').append(ui.draggable);
}
});
</script>
</body>
</html>
Thanks.