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

Question

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...

Answer 1

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

Answer 2

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();
        });
    }
});