Question

我正试图让一个div“child”可以在div“父母”内部进行拖拽和调整，并由它包含。
问题是，当我调整我的div孩子的大小时，它会被我父母的内容阻挡如果您尝试将其宽度调整到最大值，您将理解如果我删除了可拖动选项，问题就会消失。

这是一个小提琴，你可以看到问题：
JSFIDDLE

CSS

html, body, div { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; line-height:100%;}

.page_container{ width: 100%; height: 100%; position: relative; display: }
.main{ width: 800px; display: block; float: left; padding: 20px;}

.menu{ width: 200px; height: 700px; display: block; float: left; background-color: gray;}
.menu a{ color: black;}
.menu a:hover{ color: white;}

#parent{ width: 800px; height: 600px; display: block; border: solid 1px gray; padding: 0px;}
#child{ width: 100px; height: 100px;  display: block; border: solid 2px gray; cursor: move;}

HTML

<div class="menu">
    <ul>Templates
        <li><a href="template_add.php">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Templates</a></li>
    </ul>
    <ul>Slides
        <li><a href="#">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Slides</a></li>
    </ul>
    <ul>Slideshows
        <li><a href="#">Criar Novo</a></li>
        <li><a href="#">Categoria</a></li>
        <li><a href="#">Listar Slideshows</a></li>
    </ul>
</div>
<div class="page_container">
    <?php include 'includes/menu.php' ?>
    <div class="main">
        <div id="parent">
            <div id="child"></div>
        </div>
    </div>
</div>

JQUERY

$(function() {
$( "#child" ).resizable({ containment: "#parent", maxHeight: 600, maxWidth: 800, minHeight: 10, minWidth: 10 });
$( "#child" ).draggable({ containment: "#parent", scroll: true });

});

如果我删除我的div“菜单”，问题就解决了，但是当我调整with和height到最大值时，右下角和底部仍然有1px的边距。

Answer 1

问题在于你的CSS和浮动。我评论浮出水面并且工作正常。

.menu{ width: 200px; height: 700px; display: block; /*float: left;*/ background-color: gray;}

如果你想要浮动，你也可以让高度“自动设置”。高度是否有700px的原因？

.menu{ width: 200px; /*height: 700px;*/ display: block; float: left; background-color: gray;}

也摆脱了：

display:

http://jsfiddle.net/alutz33/btrP3/

此链接包含与边界问题相关的新请求：

http://jsfiddle.net/alutz33/rz4qw/

jquery ui可调整大小，可拖动错误

1 个答案: