Saving JQuery Draggable Sitemap Values Correctly
- by mdolon
I am trying to implement Boagworld's Sitemap tutorial, however I am running into difficulty trying to correctly save the child/parent relationships.
The HTML is as follows, however populated with other items as well:
<input type="hidden" name="sitemap-order" id="sitemap-order" value="" />
<ul id=”sitemap”>
<li id="1">
<dl>
<dt><a href=”#”>expand/collapse</a> <a href=”#”>Page Title</a></dt>
<dd>Text Page</dd>
<dd>Published</dd>
<dd><a href=”#”>delete</a></dd>
</dl>
<ul><!–child pages–></ul>
</li>
</ul>
And here is the JQuery code:
$('#sitemap li').prepend('<div class="dropzone"></div>');
$('#sitemap li').draggable({
handle: ' > dl',
opacity: .8,
addClasses: false,
helper: 'clone',
zIndex: 100
});
var order = "";
$('#sitemap dl, #sitemap .dropzone').droppable({
accept: '#sitemap li',
tolerance: 'pointer',
drop: function(e, ui) {
var li = $(this).parent();
var child = !$(this).hasClass('dropzone');
//If this is our first child, we'll need a ul to drop into.
if (child && li.children('ul').length == 0) {
li.append('<ul/>');
}
//ui.draggable is our reference to the item that's been dragged.
if (child) {
li.children('ul').append(ui.draggable);
}else {
li.before(ui.draggable);
}
//reset our background colours.
li.find('dl,.dropzone').css({ backgroundColor: '', backgroundColor: '' });
li.find('.dropzone').css({ height: '8px', margin: '0' });
// THE PROBLEM:
var parentid = $(this).parent().attr('id');
menuorder += ui.draggable.attr('id')+'=>'+parentid+',';
$("#sitemap-order").val(order);
},
over: function() {
$(this).filter('dl').css({ backgroundColor: '#ccc' });
$(this).filter('.dropzone').css({ backgroundColor: '#aaa', height: '30px', margin: '5px 0'});
},
out: function() {
$(this).filter('dl').css({ backgroundColor: '' });
$(this).filter('.dropzone').css({ backgroundColor: '', height: '8px', margin: '0' });
}
});
When moving items into the top-level (without parents), the parentid value I get is of the first list item (the parent container), so I can never remove the parent value and have a top-level item.
Is there a no-brainer answer that I'm just not seeing right now? Any help is appreciated.
