Hello everybody!
I'm building an application quite similar to the Mac OSX Finder with a
massive help from jQuery.
I've done a lot yet but I'm having some trouble handling the droppable
event.
Let's see what's in there :
I have some nested lists like this example :
<ul>
<li class="category">
<ul>
<li class="category">...
<ul />
</li>
<li class="item">...</li>
<li class="category">...
<ul>
<li class="category">...
<ul />
</li>
<li class="item">...</li>
</ul>
</li>
</ul>
<ul>
<li class="category">...
<ul />
</li>
</ul>
</li>
</ul>
An so on...
<li class="category"> is droppable AND draggable.
<ul> is only droppable.
<li class="item"> is only draggable.
Example: When you drag a draggable over a <ul>, nothing has to happen.
But when you drag a draggable over a <li class="category">, the <ul>
nested in this <li> has to be opened (like what happen in the OSX
Finder).
How I wrote this?
First I declared a click handler to open the nested <ul> when clicking
on a <li class="category">. Here it is:
//Click on li.
$('li').click(function(e){
e.stopPropagation();
var o = $(this);
o.siblings('li.expanded, li.info').removeClass('expanded info'); //
Remove highlights [siblings & children].
$('li.expanded, li.info',this).removeClass('expanded info');
if (o.hasClass('secteur') || o.hasClass('categorie')) //Highlight the
clicked one, according his class.
o.addClass('expanded');
else if (o.hasClass('item'))
o.addClass('info');
});
As I didn't want to repeat myself, I used this click handler in the
over handler, like this:
over: function( e, ui )
{
if(this.nodeName.toUpperCase() == 'UL')
return;
$(this).click();
},
So when the draggable is over a <ul>, nothing happens. But when it is
over a <li class="categorie">, it triggers the <li> click event.
The problem is that when you drag a <li> over a <li class="categorie">
and it opens his nested <ul>, you have to release your draggable and
drag it again over the next <li class="categorie">.
What I want to do is "chaining" the triggers and opening several
categories without having to release the draggable and drag it again.
Thanks a lot for your help and contribution and do not hesitate to
propose any idea you have, it's been a week that I'm stucked with it.
