multiple dragging with checkboxes - broken

by J. Jones

HTML

<div id="selectActions">
    <span>Select:</span>
    <ul>
      <li><a id="selectAll" href="#">all</a></li>
      <li><a id="selectNone" href="#">none</a></li>
      <li><a id="selectInvert" href="#">invert</a></li>
    </ul>
  </div>
  <div style="clear:left;">
    <div id="dragSource" class="droppableContainer">
      <ul>
        <li><img src="http://imgs.xkcd.com/comics/drapes.png" /><input type="checkbox" /></li>
        <li><img src="http://imgs.xkcd.com/comics/misusing_slang.png" /><input type="checkbox" /></li>
        <li><img src="http://imgs.xkcd.com/comics/donner.jpg" /><input type="checkbox" /></li>
 
      </ul>
    </div>

    <div id="dropTarget" class="droppableContainer">
    </div>
  </div>

CSS

body {
    font: 16px Helvetica, Arial;
    overflow-x: hidden;
}
div {
    margin: 5px;
    padding: 0;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    padding: 0;
    margin: 0;
    float:left;
}
#selectActions span, #selectActions li {
    float: left;
    padding: 5px;
}
.droppableContainer {
    width: 48%;
    float: left;
    min-height: 200px
}
.droppableContainer li {
    height: 90px;
    width: 110px;
    margin: 2px;
    background-color: white;
    padding-bottom: 4px;
}
.droppableContainer img {
    width: 90px;
    max-height: 90px;
    max-width: 90px;
    width: 90px;
    vertical-align: middle;
}
.droppableContainer input {
    height: 90px;
    vertical-align: middle;
}
#draggingContainer {
    width:48%;
}
#draggingContainer input {
    visibility: hidden;
}
#dragSource {
}
#dropTarget {
    border: 3px dashed grey;
}
#dropTarget input {
    visibility: hidden;
}

JavaScript

$(function(){
  
  $('#dragSource li').draggable({
    helper: function(){
      var selected = $('#dragSource input:checked').parents('li');
      if (selected.length === 0) {
        selected = $(this);
      }
      var container = $('<div/>').attr('id', 'draggingContainer');
      container.append(selected.clone());
      return container; 
    }
  });
  
  $('#dropTarget').droppable({
    tolerance: 'pointer',
    drop: function(event, ui){
      $(this).append(ui.helper.children());
    }
  });
  
  $('#selectAll').click(function(){
    $('#dragSource input').attr('checked', 'checked');
    return false;
  });
  
  $('#selectNone').click(function(){
    $('#dragSource input').removeAttr('checked');
    return false;
  });
  
  $('#selectInvert').click(function(){
    $('#dragSource input').each(function(){
      var $this = $(this);
      if ($this.attr('checked')) {
        $this.removeAttr('checked');
      }
      else {
        $this.attr('checked', 'checked');
      }
    });
    return false;
  });
});