封じ込め付きのドラッグ可能な、サイズ変更可能なdivは包含の外に出る

Question

私はタイムテーブルスクリプトで忙しかった。そのためには、jQueryをドラッグアンドリサイズする必要がある。 でも、jsFiddleでドラッグ可能なのは親を持っているのがわかりますが、クリックするたびに親に10pxをドラッグできます。 EDIT： 私が必要とするのは、コンテナの外にドラッグできないということです。

 <div class="containment" style="display:block; height:40px; width:150px; background-color:#f2f2f2;"> 
     <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/> 
    </div> 

jqueryの：

http://jsfiddle.net/QBX2B/1/

htmlのを助けることができる position:relative;へのコンテナーの追加

   $('.baldie').resizable({ 
         containment: "parent", 

        }).draggable({ 
         grid: [5,0], 
         containment:"parent", 
         drag: function(event, ui) { 

         } 
        }); 

Answer 1

は、問題を解決します。

私はあなたのコードチェックの実行を修正している、あなたはそれをチェックすることができます -

<div class="containment" style="position: relative; display:block; height:40px; width:150px; background-color:#f2f2f2;"> 
      <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/> 
     </div> 

それを確認します -

Jquery UI resizable issue expands beyond containment (draggable also used)

Answer 2

インラインスタイリングは良い習慣ではありません。コードが読みにくく、時には難しくなります。親のマージンとパディングを変更するためにCSSを使用すると、子が親全体をカバーできるようになります。 JSFiddle Solution

.baldie{ 
    display:block; 
    height:40px; 
    width:150px; 
    background-color: rgba(214, 255, 210, .7); 
    margin:1px; 
} 
.containment{ 
    position:relative; 
    display:block; 
    height:40px; 
    width:150px; 
    background-color:#f2f2f2; 
}