jQuery Draggable CSS Rotation

This demonstrates a bug in jQuery draggable when a target container has been rotated using CSS

HTML

<div class="columns droppable">Fails</div>
<div class="rows droppable">Works</div>
<div class="draggable pill label">DragMe!</div>

CSS

.columns {
        width: 300px;
        height: 50px;
        border: thin solid red;
		transform:rotate(-90deg);
		-ms-transform:rotate(-90deg); /* IE 9 */
		-webkit-transform:rotate(-90deg); /* Safari and Chrome */
         margin-bottom: 200px;
}
.rows {
        width: 300px;
        height: 50px;
        border: thin solid red;
         margin-bottom: 50px;
}
.pill {
    background: steelblue;  
    width: 100px;
}
}
.ui-state-hover { background: red;}

JavaScript

$(".draggable").draggable({revert: true});
				$(".droppable").droppable({
					accept: ".draggable",
          tolerance: "touch",
					activeClass: "ui-state-hover",
					drop: function( event, ui) {
						var draggedItem = ui.draggable[0];
						if(draggedItem) {
							alert("You dropped it");
						}
					}
				});