I'm very interested in this post. I go trough the same kind of issue a
couple month ago and I never found the solution.
Thanx !
On Dec 14, 1:48 pm, Karl Delandsheere <[EMAIL PROTECTED]>
wrote:
> 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.
