Question

当我尝试在将div容器（#draggableItem）放入指定的div字段（#newSide）之后调整它的大小时，它仅限于左侧和底部的一种“神奇边框”领域

我的例子是jsFiddle。

步骤：

将黄色框拖到灰色区域的中间。
将黄色框调整为灰色区域的下（或左）端。

我已经阅读了一个错误并尝试了不同的位置设置：绝对/相对和！重要标签，但我没有得到它。

有关如何解决问题的任何想法？这是一个错误的CSS设置吗？（对我来说，有必要将可放置区域放在我想要的任何地方（不仅仅是在顶部：0px;左：0px;）

非常感谢！

HTML代码：

<div id="editor">
  <div id="newSide"></div>
</div>
<div class="draggableItem"></div>

JS代码：

$(function() {

$( "#newSide" ).droppable({
    drop: function( event, ui ) {
    }
});

$(".draggableItem").resizable({
                    containment: "#newSide",
                    grid: 1, maxHeight: 150, maxWidth: 200, minHeight: 20, minWidth: 20
                    })
                    .draggable({
                          containment: "#newSide",
                          grid: [1,1]
                    }); 
});

CSS：

#editor{
    display:block;
    position: absolute;
    border: 2px solid red;
    top:100px;
    left:100px;
}

.draggableItem
{
    width:100px;
    height:100px;
    background:yellow;
}

#newSide
{
    display:block;  
    width:401px;
    min-height:301px;
    height:301px;
    background-color:#444444;
}

Answer 1

我不确定你到底在找什么？

HTML结构：

<div id="editor">
    <div id="newSide">
        <div class="draggableItem"></div>
    </div>
</div>

演示：http://jsfiddle.net/QU994/13/

jQuery-Ui可调整大小：div大小仅限于魔法边框

1 个答案: