Question

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(ev,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?

Answer 1

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.