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

I'm trying to have a div "child" be draggable and resizable inside a div "parent" and contained by it.
The problem is, when I resize my div child, it is blocked by something inside my div parent.
If you try to resize it's width to maximum you will understand.
If I delete the draggable option the problem disapears.

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

Here is a fiddle where you can see the problem:
JSFIDDLE

这是一个小提琴,你可以看到问题: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 });

});

If I delete my div "menu" the problem is solved but then, when I resize the with and height to maximum there is still a margin of 1px in the right corner and bottom.

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

1 个解决方案

#1

The problem is with your CSS and the float. I commented the float out and it works fine.

问题出在CSS和浮点数上。我评论浮出水面,它工作正常。

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

You could also let the height "auto-set" itself if you want the float. Is there a reason for the height to be 700px?

如果你想要浮动,你也可以让高度“自动设置”。高度有700px的原因吗?

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

also get rid of:

也摆脱:

display:

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

This link includes the new requests pertaining to the boarder problem:

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

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

#1