Question

I’m using the jquery sortable functionality to sort a list of items in my application. Seeing how my lists were getting pretty large I decided to reorganize them in sublists that can be expanded or collapsed.

The idea I had was that when the user drags an element over the header of a sublist and holds his cursor there for 750ms the list expands but I’ve run into a problem where I can’t get the ID of the underlying div’s ID because jquery seems to grab the ID of the item I’m dragging and not what I’m making it hover over.

Is there a functionality or plugin I can use to achieve this (I’m sure I’m not the first to have this problem but my googlefu has failed to turn up anything that’s relevant to me).

Thanks for any help 🙂

Edit:

Here’s an idea of what I’m trying to do:

$('.categoryLi').hover(function(){expandCategory(this.id);});

function expandCategory(id)
{
    if(sectionDraggingMode)
    {   
        $(document).oneTime('750ms', 'expandCategoryTimer', function(){$('#'+id+' .category_content').show();});
    }
}

And here’s the gist of my HTML:

<ul class="category">
    <li class="categoryLi" id="c8">
            <div class="sublistHeader"></div>
            <div id="cat_8_container" class="category_content" style="display: none;">
            //sortable list here
            </div>
    </li>
    <li class="categoryLi" id="c9">
            <div class="sublistHeader"></div>
            <div id="cat_9_container" class="category_content" style="display: none;">
            //other sortable list here
            </div>
    </li>
</ul>

The way it is now when I hover over .categoryLi I call expandCategory sending over the id of the element I’m hovering over but it never triggers the hover of any .categoryLi container except for the parent of the element I’m dragging at the moment. I need to find a way to “peek” behind it. So if I’m dragging an item from #c9 jquery thinks I’m always hovering over #c9

Answer 1

Well turns out that jquery’s droppable can be used for this. I defined the area that I want to use as a trigger to the expand as a droppable area and did just that when the over event is triggered.

$('.categoryLi > .toolbar').droppable({
    accept: ".sectionLi",
    over: function(event, ui){
        $(this).siblings('.category_content').show();
        $('.section').sortable('refreshPositions');
    }
});

There are some problems with this fix but at least it solved the issue with the hovers. Hope this can help someone in the future.