Question

我目前正在使用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'
    });
});

Answer 1

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

这是另一个SO问题，需要尝试一些变通方法：Dragging & Resizing CSS Transformed Elements

一些答案你可以找到一个旨在直接解决这个问题的插件。

Answer 2

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

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

缩放的div不能在所有父div上拖动

2 个答案: