0

#draggableItem指定された div フィールド ( ) にドロップした後にdiv コンテナ ( ) のサイズを変更しようとする#newSideと、左と下の領域の一種の「魔法の境界線」に制限されます。

私の例はこのjsFiddleにあります。

手順：

  1. 黄色のボックスを灰色の領域の中央にドラッグします。
  2. 黄色のボックスのサイズを灰色の領域の下 (または左) 端に変更します。

私はバグを読み、位置の異なる設定を試しました：絶対/相対および !important タグを使用しましたが、わかりません。

問題を解決する方法についてのアイデアはありますか? 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;
}
4

1 に答える 1

0

これがあなたが探しているものかどうかわかりませんか？

HTML 構造:

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

デモ: http://jsfiddle.net/QU994/13/

于 2013-03-23T19:52:55.907 に答える