javascript - 缩放的 div 不可拖动到所有父 div

标签 javascript jquery css jquery-ui

我目前正在使用 jquery-ui 开发一个元素,其中我有一个包含多个子项的大 div。这个想法是,这些子 div 将由用户先前创建,然后按比例缩小(大约为原始大小的 20%)并放置在大的 div 中,用户可以在其中按照自己的喜好排列它们。

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

这个 fiddle 说明了问题: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'
    });
});

最佳答案

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

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

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

关于javascript - 缩放的 div 不可拖动到所有父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14794690/

相关文章:

html - 通过 url jQuery 重定向时的焦点元素

javascript - 计算 DIV 元素的最大/最小高度

javascript - jQuery 中的 Bootstrap 选择附加功能

html - HTML 布局元素类名称的标准?

javascript - 给定一台可以一次移动无限球的机器,以最少的移动次数将球从一组桶移动到另一组的算法

javascript - 如何修复 ReactJS 中的 "too much recursion"错误?

javascript - 有什么方法可以简化此方法吗?在 jquery 上隐藏/显示元素

javascript - 具有来自 get 请求的上下文的 jquery 选择器

javascript - 使用 express 和 node.js 更新 mongodb 中的单个记录

javascript - 在 react 中计算数量和总价格