jQuery UI - 当使用CSS旋转可放置区域时错误的可放置区域

Question

我正在使用jQuery UI的拖放...它主要工作，但是可放置区域与浏览器中的droppable div的形状不匹配... droppable div有一个CSS旋转应用于它...被拖动的项目似乎进入两侧的div，但在顶部和左侧jQuery UI认为元素已经进入了div在页面上的位置之外的droppable div ...

我创建了一个演示问题的CodePen ...... CodePen of jQuery UI draggable-droppable bug

var $moveBox = $('.move-box');
var $dropBox = $('.drop-box');

$moveBox.draggable();

$dropBox.droppable({
drop: function( event, ui ) {
    $( this )
      .addClass('highlight');

  },

over: function( event, ui ) {
$( this )
  .addClass('highlight');
},

out: function( event, ui ) {
  $( this )
  .removeClass('highlight');
}

});

如果您尝试使用笔，您会注意到红色框在两侧的早期进入可放置的盒子......

非常感谢任何建议......