web-dev-qa-db-ja.com

<div>をサイズ変更可能にする

<div>コンテナをドラッグアンドドロップでサイズ変更できるようにする方法はありますか？ユーザーがドラッグアンドドロップを使用してサイズを変更できるようにするにはどうすればよいですか。

どんな助けでも本当に感謝します！

htmldrag-and-dropresize
27
Chris

最良の方法はCSS3を使用することです。少なくともWebkitとGeckoでサポートされています。

w3c spec によると：

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

WebkitとFirefoxは仕様を同じように解釈しません。 Webkitでは、サイズは設定された幅と高さに制限されます。別の質問があります： CSSを使用して、要素を最初のサイズよりも小さいサイズにサイズ変更できるようにするにはどうすればよいですか？ これについて。

42
Georg Schölly
.resizable-content {
    min-height: 30px;
    min-width: 30px;
    resize: both;
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}
3
sushmitha shenoy

いくつかの関数を実行する必要がある場合doOnResize（tag）すべてのタグ（<div>）の配列内でmustberesizeabletags、この配列をwindowの配列に単純にコピーできます：

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].Push(tags[i])
}

そしてそのセットの後

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

最初のどこかに書いておく必要がある場所

const WIN_RESIZED = 'move_resized_divs'

'move_resized_divs'のような任意の名前

0
Leon Rom