缩放的 div 不能拖动到所有父 div答案

【问题标题】：Scaled div not draggable over all of parent div缩放的 div 不能拖动到所有父 div
【发布时间】：2013-01-25 12:35:27
【问题描述】：

我目前正在使用jquery-ui 进行一个项目，其中我有一个包含多个孩子的大 div。这个想法是，这些子 div 将由用户先前创建，然后按比例缩小（到其原始大小的 20% 左右）并放置在大 div 中，用户可以在其中按照他们喜欢的方式排列它们。

我的问题是缩放后，我无法将子 div 拖到父级中的所有位置。相反，即使没有对父级应用缩放转换，它们似乎也仅限于缩小版的父级。

这个小提琴说明了问题：http://jsfiddle.net/yRNqu/（尝试将蓝色框拖到最右边或最底部）

还有其他人遇到过这个问题吗？我真的很感激一两个指针。

谢谢

HTML：

<html>
    <div class="container">
        <div class="box"></div>
    </div>
</html>

CSS：

.container{
    height:500px;
    width: 500px;  
    background-color: red;

}
.box{
    height:100px;
    width: 100px;
    background-color: blue;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

jQ 1.9 + jQ UI：

$(function() {
    $('.box').draggable({
        containment: 'parent'
    });
});

【问题讨论】：

标签： javascript jquery css jquery-ui

【解决方案1】：

JQuery UI 不够智能，无法处理 CSS 缩放和旋转，因为它依赖于报告的边界框，在这种情况下变得毫无意义。

这是另一个 SO 问题，有很多解决方法可供尝试：Dragging & Resizing CSS Transformed Elements

下面几个答案你可以找到一个声称可以直接解决这个问题的插件。

【讨论】：

是的。 $('.box').width() 报告 100，无论比例因子如何。
看起来很有希望，我试试看。谢谢！

【解决方案2】：

This has been filed in the jQuery bug tracker，但它已关闭，因为大约 3 个月前无法修复：

我们在会议上讨论了这个问题，CSS 转换不是我们计划在可预测的特性中随时支持的东西 [原文如此]，因此将其作为不会修复的问题关闭。

【讨论】：