jQuery drag element into sortable list that has initial state as hidden

I can't seem to drag an element into sortable list that has initial state as hidden (ie. display:none).

Each row's html looks like this:

<div class="dragbox" id="item1" >
  <h2>Expression 1<span id="exp1"></span></h2>
  <div class="dragbox-content" >
    <ul class="dragrow1"></ul>
    <ul class="dragrow2"></ul>
  </div>
</div>

But in order for a field to be able to be dropped into a 'dragrow*', the div 'dragbox-content' has to have a style of 'display:block'. This can either be written in the main css style, or hard-coded into the div itself (eg. )

The trouble is that upon page load you kinda want all rows closed (or at least all but one). This means that 'display' should be set to 'none' initially.This part is easy. Some jQuery can change this css upon page load inside the ready() event:

$('.dragbox')
.each(function(){
 开发者_如何学运维 $(this).find('.dragbox-content').hide();
});

And there is a jQuery command called 'toggle' which when you click the h2 tag automatically swaps this css display between block & none. So I can show or hide each row.

So... if a row is shown (display:block) within the ready() event, it is possible to drag items into the sortable list (even if you toggle between showing and hiding the row).

BUT... if a row is hidden (display:none) within the ready() event, it is impossible to drag items into the sortable list.

Any ideas? Really stuck on this one...

This maybe too late, but here is the solution (maybe it can help someone else). The trick is that you need to refresh the sortable.

$('.dragitem').draggable({
    start: function() {
        // show your dropzone
        $('#dropzone').show();

        // refresh your sortable -- so you can drop
        $('#dropzone').sortable('refresh');
    }
});

You can use the connectToSortable option Example

//getter
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//setter
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

http://docs.jquery.com/UI/Draggable#option-connectToSortable

Not entirely sure whether this is an acceptable solution within your constraints, but you will have to show the elements to drag to them, so I would suggest unhiding the elements when the drag starts. That way they wont be visible until they really need to.

You could do something like this:

$('.listOfDraggableItems').draggable({
    start: function(event, ui) {
        $('.dragbox').each(function(){
            $(this).find('.dragbox-content').show();
        });
    }
});