I'm encountering an issue when trying to drag an element into a sortable list that is initially hidden (display:none).
The HTML structure for each row 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>
For an item to be droppable into a 'dragrow*', the div with class 'dragbox-content' must have its style set to 'display:block'. This can be done in the main CSS file or directly within the div as an inline style.
The challenge arises when on page load you want all rows closed, meaning the 'display' property should be 'none' initially. To achieve this, jQuery can be used inside the ready() event:
$('.dragbox')
.each(function(){
$(this).find('.dragbox-content').hide();
});
Another option is using the toggle function in jQuery, which allows you to switch between displaying and hiding content simply by clicking the h2 tag.
If a row is visible (display:block) during the ready() event, dragging items into the sortable list works fine, even when toggling visibility.
However, if a row is hidden (display:none) during the ready() event, it becomes impossible to drag items into the sortable list.
Any suggestions on how to tackle this problem? I'm stuck and could use some help...