要素が境界領域を覆うことを制限する方法がありますか？jquery ui

Question

jquery UIを使用してドラッグアンドドロップを開発しました。だから私はドロップnのドロップボックスの境界を越えて要素をドロップする場合はまだ要素にかかるので、ドロップの境界領域を制限する方法はありますか？ スクリーンショット：http://img10.imageshack.us/img10/5662/borderk.jpg

Answer 1

私はあなたの現在のコードでは、背景イメージを持つ1つの要素があると仮定しています。

htmlとcssをこのように変更し、ドロップ領域としてdb-innerを使用すると、これが機能するはずです。

http://jsfiddle.net/lollero/xTYPP/

HTML：

<div id="DropBox"> 
    <div id="db-inner"></div> 
</div>​ 

CSS：

#DropBox { 
    margin: 20px; 
    width: 180px; 
    height: 50px; 
    background: #e1e1e1 url('http://placekitten.com/g/200/70') no-repeat top left; 

    padding: 10px; 
} 

#db-inner { 
    width 100%; 
    height: 100%; 
    background: #fff; 
    opacity: 0.7; 
    border: 1px dashed #777; 
} 
​ 

を簡単にするために：親要素があると定義される内部要素の寸法を制限するパディングを付加100%

アイデアは、#db-innerがドロップボックス要素になり、#DropBoxが背景イメージを保持する追加のラッピング要素であり、ちょうどドロップボックス領域よりも大きくなるということです。