列幅を選択するためのUI
シンプルなUIオプション（CognitoまたはWufooの1つ）を使用してフォームを構築するアプリケーションを作成しています。
私の現在の問題は、ユーザーが列のサイズを定義できるように、選択した列の幅を定義するオプションを表示する方法を考えようとしていることです（ユーザーはそれを単なる要素として表示します）テキスト入力ボックスなどですが、DOMの観点からは、列の中にあります）。
列のサイズを6グリッドに分割しました（ブートストラップ12列のグリッドに基づいて）、ただしデフォルトのオプションを4だけに表示したいこれはほとんどの場合、ユーザーが1-4（つまり、幅の1/4の間、全幅まで）の列サイズの単純なオプションが必要になるだけですが、場合によっては、派手なフォームを作成する人が列幅を全幅の6分の1に分割するオプション。
つまり、この種の構成を可能にするシンプルなUIが必要です。いくつかのオプションを試してみましたが、今持っているものは少し複雑すぎて、スペースを取りすぎます。
したがって、たとえば、下の画像には1〜4に基づいて幅を選択する構成がありますが、ドロップダウンをクリックすると1〜6が許可されます。さまざまなサイズを考慮する単一のUIがあり、それがモバイルフレンドリーになるように（つまり、マウスだけがクリックできるような非常に小さなクリックゾーンが存在しない）場合は、有益です。
更新
1〜4だけでなく拡張オプションを使用するには、1〜8ではなく1〜8に拡張する必要があります。
私が探している方向に移動するアプローチは次のようなもので、ユーザーは任意の増分を選択できます。ただし、デフォルトではの一般的なユーザーにはオプションが多すぎるため、通常は1/4、1/2、3/4のサイズが必要になります。 、フル。
Edgeをドラッグ可能にできますか？
必要に応じて、ドラッグにノッチを付けることができます。 JSライブラリには、ドラッグエッジ機能があります。
ここでのノッチは例です。ドラッグ可能な要素がボーダー全体であると想像してください。 https://jqueryui.com/slider/#steps
これはうまくいくと思いますか？その長方形を可変スペースまたは列と見なします。完全なアニメーションは作成しませんでしたが、それがあなたにアイデアを与えることを願っています。
フォームを作成する場合は、他の選択したオプションで列のサイズを指定するだけではどうですか。
たとえば、次のようなフォームが必要です...
- 6つのテキスト入力ボックス
- 1セットのラジオボタン（合計5つのオプション）
- 拡張応答用の大きなテキストボックス
これらを2つの別々の列に分割し、それら2つの列に配置/順序付けできるようにしたい。
これを知っていれば、最適なサイズを決定できるはずです。明らかなものがない場合は、お知らせください。しかし...あなたが頭の悪いシンプルなフォームの作成を提供しようとしている場合、この種の実装から逸脱する必要がある状況はほとんどありません。