jQuery UIドラッグのわずか50％でサイズ変更可能

Question

ここで私の目標は、ページの幅を設定できるようにすることです。ここには多くのデータがあり、無駄な解像度を必要としません。

とにかく、ボックスのサイズを変更するメカニズムは、半分しか機能しません。文字通り、サイズが半分になるようにスケーリングするだけです。たとえば、実際のページの最小幅は900px、画面の幅は1920、900で取得し、画面の角にドラッグすると、〜1410pxになります。

私はこのjsfiddleでこれを再現することができました：http://jsfiddle.net/FY23J/

本体の最も右のエッジグリップです。あなたがそれをつかんでそれを動かすと、マウスと元の縁の間の半分の広がりが見えます。私はjQueryのUIドキュメントで確認しましたが、これは意図したとおりの動作ではありません：http://jqueryui.com/demos/resizable/#default

これは私のCSSの設定方法に起因するものですか？誰もそれを回避する方法を知っていますか？

Answer 1

これが解決策です。私がここで何をしているのかについての多くのドキュメンテーションがないので、それが正しいのであれば誰にでも教えてください。デモ：http://jsfiddle.net/FY23J/3/

$("#wrapper").resizable({ 
    handles: 'e', 
    alsoResize: "#nav", 
    minWidth: 900, 
    maxWidth: $(window).width()-25, 
    stop: function(event,ui){ 
     console.log(ui.size.width); 
    }, 
    resize: function(event, ui) { 
     var self = $(this).data("resizable"), 
      o = self.options, 
      cs = self.size, 
      os = self.originalSize; 

     var newWidth = os.width + (Math.round((cs.width - os.width)*2)); 
     newWidth = newWidth <= o.minWidth ? o.minWidth : newWidth; 
     newWidth = newWidth >= o.maxWidth ? o.maxWidth : newWidth; 
     console.log(newWidth); 
     self.size.width = newWidth; 
    } 
}); 

Answer 2

サイズ変更がうまく機能すると思います。 20pxのためにマウスをドラッグすると、20pxずつダイアログが拡大されます。

問題は、ドラッグする距離の半分で両端が大きくなるようにダイアログを中央に配置することです。