jquery sortable droponempty fix

I am working with jQuery's sortable (jQuery ui)

By default dropOnEmpty = true, and as a speedup I'm applying the connectwith after I apply .sortable() to my selectors as follows:

<script type="text/javascript">  
  $('#selector1').sortable({ 
    over: function(ev,ui){
      console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id'));
    } 
  )};  
  $('#selector2').sortable({ 
    over: function(e开发者_JS百科v,ui){
      console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id'));
    } 
  )};

  $('.ui-sortable').sortable('option', connectWith', '.ui-sortable');
</script>

I've demonstrated my logging to try to figure out what's going on - Imagine I first drag from #selector1 to #selector2 (which is empty) - no logging appears, but than if I drag back into the source, I get the logging, and than when I drag back into the target column it works?

The empty selector even has ui-sortable class but it's not connecting!

How should I make sure that even the empty lists while applying the connect-with after initializing the the connectWith separately?

http://jsfiddle.net/MMyP3/5/

EDIT: Code as requested:

HTML:

<div id="container" style="display:inline">
<div id="column1" class="column">

<div class="element">Element 1</div>
<div class="element">Element 4</div>

</div>

<div id="column2" class="column">

<div class="element">Element 2</div>
<div class="element">Element 3</div>

</div>

<div id="column3" class="column">

</div>

CSS:

.column{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px;
    margin: 10px;
    min-width:100px;
    padding: 5px;  
    float:left;
    width:100px;
}

.element{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px; 
}

Javascript:

$('.column').sortable({
    var $this = $(this);
    activate: function(en, ui) {
        $this.css('min-height', '100px');
        $this.css('background-color', '#666');
    },
    deactivate: function(en, ui) {
        $this.css('min-height', '0px');
        $this.css('background-color', '#FFF');
    },
    placeholder: 'ui-state-highlight'
});

$('.column').sortable('option', 'connectWith', '.column');​

Edit: I updated my link, I think the main issue was your html structure which I adjusted, also make sure you are dragging the elements to the top of the empty divs. Just because you are changing the background color and min-height doesn't mean the actual sortable's height is changing. So it may look like you can place the items any where in the open area, in reality you actually can't, unless you define heights for the sortables on the get go.

@Jack's explanation of why you can't drop into empty sortables is correct. Sortable caches the positions of its sortables at the beginning of a drag start before any callbacks have been run. So if you change the height of the drop zones in the callback, those are ignored as it still uses cached values.

If you use the Sortable's 'refreshPositions' method just after you adjust the height in your callback, the sortable should now have accurate positioning info so that you can successfully drop in the target zone without having to touch a non-empty sortable list.

$('#sortable').sortable({
    start: function (e, ui) {
        $('.sortable_drop_zone').css('min-height', '50px');
        $('#sortable').sortable('refreshPositions');
    }
});