4

我目前正在使用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 用户界面：

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

2 回答 2

4

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

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

几个答案下来，您可以找到一个声称可以直接解决此问题的插件。

于 2013-02-10T04:26:55.570 回答
1

这已在 jQuery bug tracker 中归档，但由于大约 3 个月前无法修复而关闭：

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

于 2013-02-10T04:32:42.410 回答