ここでの例のように、「ポートレット」スタイルのインターフェイスで jQuery UI Sortable を使用するアプリケーションの実装があります: http://jqueryui.com/sortable/#portlets
「ターゲット」プレースホルダーを真の一貫性で表示するのに少し問題があります。4 つの並べ替え可能なコンテナーがあります。1 つは全幅、2 つは 50% 幅、もう 1 つは全幅です。これは、ユーザーが「ポートレット」を 100% 領域の 1 つにドラッグすることで、フルサイズの「ポートレット」を作成できるという考え方です。
できます。
ただし、一番上の「プレースホルダー」を確実に表示させることはできません。マウスを移動し、他のポートレットの上に移動すると、ウィジェットをそこにドロップできるように表示されることがあります。
「時々」変数を排除したいだけです。Sortable インタラクションによって提供される多くの動作パラメータのうち、どのパラメータを調整する必要がありますか? また、考慮に入れる関連する CSS はありますか? (パディングなど)。
サンプルコードを提供しますが、実用的ではありません..デフォルトで呼び出しています:
$('.widgetContainer').sortable({connectWith: ".widgetContainer"});
CSS に関しては、サイトに継承の連鎖があり、分離するのは難しい (もちろん不可能ではありませんが) でしょう。これらのルールは、少なくとも次のように規定されています。
.placeholder { float: left; margin-bottom: 10px; }
.widgetContainer { float: left; padding-bottom: 20px; }