我目前正在使用 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/