Jquery 无法拖放到已通过CSS转换的div的所有区域

我正在尝试开发一个拖放函数。可拖放div由CSS转换。可拖动的div不会在显示的框上掉落，它只在盒子的左边和中间落下，但不会落在盒子的右边。

下面是该页面代码的简单版本，外加一个JSFIDLE：

$（“#可拖动”）.draggable（）；
$（“#可拖放”）。可拖放({
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.find（“span”）
.html（“已删除！”）；
}
});
#可拖动{
宽度：50px；
高度：50px；
填充：0.5em；
浮动：左；
保证金：10px 10px 10px 0；
}
#可降落{
宽度：150px；
高度：150像素；
填充：0.5em；
浮动：对；
利润率：10px；
}
.droptarget{
-webkit转换来源：100%100%；
变换原点：100%100%；
-moz变换：倾斜（45度，0）；
-ms变换：倾斜（45度，0）；
-o变换：倾斜（45度，0）；
-webkit变换：倾斜（45度，0）；
变换：倾斜（45度，0）；
}
.放弃目标{
-moz变换：倾斜（-45度，0）；
-ms变换：倾斜（-45度，0）；
-o变换：倾斜（-45度，0）；
-webkit变换：倾斜（-45度，0）；
变换：倾斜（-45度，0）；
}

到这里来

拖

在浏览器中使用skew转换元素的内容框时，它的实现看起来很糟糕。假设浏览器理解新转换的上下文框，但id不理解

$('#droppable').outerWidth() // 189

很明显，宽度大于
189
，实际上
189
是元素的宽度，没有倾斜变换

位置已更改

// With transform
$('#droppable').position(); // { top: 0, left: 189 }

// Without transform
$('#droppable').position(); // { top: 0, left: 357 }

对DOM中的内容框进行的所有转换似乎都是将位置更改为倾斜元素的左上角，而不是其他位置，因此它不表示您看到的元素的形状

这可能是您无法修复的浏览器和DOM中的一个限制：(

使用原始JavaScript而不是jQuery具有相同的结果，因此它不是jQuery

您可以尝试使用包装器作为可拖放的，并将倾斜的元素放入其中，但可拖放区域将是一个更大的正方形

编辑

事实上，我向Chromium报告了一个bug，你可以看到。他们基本上告诉我向W3C请求，以便标准化它，我们在所有浏览器中都可以得到它。我不会走那么远，请随意自己做。
在倾斜变换之后，jquery用户界面将contet框识别为具有原始宽度和高度的框，而不进行变换，but从现在变换的框的左上角开始。