4

サイズ変更可能でドラッグ可能なJqueryプラグインが適用されている要素は、親要素に適用されていない場合、範囲外になります。

overflow:hidden;

それに適用されます。

これがJSfiddleです：http：//jsfiddle.net/hjtBA/

要素を右下隅に数回ドラッグしてみてください。あなたはそれが範囲外になっているのを見るでしょう。親要素、たとえば#outerをoverflow：hiddenに設定すると、問題が解決することがわかりました。

問題： 他のCSSが正常に機能するには、親にoverflow：visibleが必要です。親をoverflow：hiddenにすることなく、他にどのように問題を解決できますか？

前もって感謝します！

4

2 に答える 2

4

サイズ変更可能は、要素が絶対位置に配置されるように変換するため、境界ボックスは関係ありません。

バウンディングボックスから3pxをドラッグできるというバグがあるようです。そのため、フィドルを3pxスナップ関数を追加するこのコードに置き換えて、境界から3pxをドラッグできないようにします:-) 

$(function(){
    $('#inner').resizable({
        containment: 'parent'        
        }).draggable({
        containment: 'parent' ,
        snap: "#outer", snapMode: "inner" ,
        snapTolerance: 3       
    });    
});​

オーバーフローが見える必要があります！アイテムをドラッグしてサイズ変更できる場合、それ以外の場合は、アイテムが取得できなくなる原因になっていることがわかりました。

于 2012-06-01T11:26:50.753 に答える
1

それが役立つ人のための私の解決策、フィドルでコードを動作させる

$('#box-1').draggable({
  grid: [20, 10],
  axis: "x",
  containment: '#container'
  });

http://jsfiddle.net/pjasv3hg/

于 2019-05-14T12:22:31.767 に答える