jQuery connectToSortable Nested Lists and Greedy Option - jquery-ui-sortable

Question

I've been trying to resolve an issue for some time with connectToSortable and nested lists. I've created an example at jsfiddle that shows the basic code:
http://jsfiddle.net/ZYSYM/
What I would like to achieve is the ability for a user to drag a "New Item" from the right list into the sub items list. However, the issue is that it adds the item to both the sub and parent lists.
I've read that perhaps the Greedy option may resolve this, however I'm not sure if it's working correctly or I've misinterpreted how it's meant to work. I've googled and searched around but could not find anyone with the exact same issue.
I've also performed some debugging and the greedy option fires the line parentInstance._out.call(parentInstance, event); in jquery-ui, which I think is for this purpose, but it doesn't seem to have any affect.
I'm not an expert in jQuery so any help is greatly appreciated. Perhaps I've missed something simple or there's a better way of doing this?
Thanks and please let me know if you require any further information.

Answer 1

This is little trickier than simple cases:
The Html:
<div style="float: left;">
<ul id="list_1">
<li>Existing 1</li>
<li>Existing 2</li>
<li>
<ul id = "list_2">
<li><dl> <dt>Existing Sub 1</dt></dl></li>
<li>Existing Sub 2</li>
<li>Existing Sub 3</li>
<li>Existing Sub 4</li>
</ul>
</li>
<li>Existing 3</li>
<li>Existing 4</li>
</ul>
</div>
<div style="float: right; margin-top: 30px;">
<ul id="from_list">
<li class="new_item">New Item 1</li>
<li class="new_item">New Item 2</li>
<li class="new_item">New Item 3</li>
<li class="new_item">New Item 4</li>
</ul>
</div>
The CSS:
#list_1 .dropzone {
background-color: #FFFFFF;
border-bottom: 4px solid #FFFFFF;
height: 6px;
}
The Javascript:
var selector = '#list_1, #list_2';
$('#list_1 li').prepend('<div class="dropzone"></div>');
$('#list_1 li, #from_list li').draggable({
opacity: .8,
handle: ' > dl',
addClasses: false,
helper: 'clone',
zIndex: 100 }
);
$('#list_1 .dropzone').droppable({
accept: '#from_list 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: '', borderColor: '' });
},
over: function() {
$(this).filter('dl').css({ backgroundColor: '#ccc' });
$(this).filter('.dropzone').css({ borderColor: '#aaa' });
},
out: function() {
$(this).filter('dl').css({ backgroundColor: '' });
$(this).filter('.dropzone').css({ borderColor: '' });
}
});
You can see the result here:
http://jsfiddle.net/F3nck/
Credit due:
I found the solution and adapted to your example from:
http://boagworld.com/technology/creating-a-draggable-sitemap-with-jquery/