3

これが既存のソート可能なhttp://jsfiddle.net/bcAH2/5へのリンクです

コードをコピーするだけで、

 <ul id="sortable">
   <li class="ui-state-default">1</li>
   <li class="ui-state-default">2</li>
   <li class="ui-state-default">3</li>
   <li class="ui-state-default four">4</li>
   <li class="ui-state-default">5</li>
   <li class="ui-state-default">6</li>
   <li class="ui-state-default">7</li>
   <li class="ui-state-default">8</li>
   <li class="ui-state-default">9</li>
   <li class="ui-state-default">10</li>
   ...
</ul>

スクリプト

$(function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
   $("#sortable .four").css("height","190px");
});

</ p>

私が達成しようとしているのは、セル123の下のスペースを567 8のようなセルで埋めることです...ドラッグアンドドロップでは不可能ですか？

4

3 に答える 3

6

gridsterと呼ばれる jQuery プラグインがあり、必要な機能を実行できます (フロント ページのデモを参照してください)。この回答で詳しく説明されているように、より単純ですが柔軟性に欠ける代替手段は、いくつかの列を作成し、それぞれを並べ替え可能にし、それらを接続して、ある列から別の列にドラッグできるようにすることです。これはあなたに近い例ですが、いくつかの注意事項はありません:

  • レイアウトを台無しにすることなくheight、より大きなタイルを持つことができますが、より大きなものを持つことはできません（グリッドスターにはこの制限はありません）。width
  • 1 つの列の 2 つのタイルの間に「空のスペース」を配置することはできません (gridster では制限が少なくなります)。
  • 1 つの列からすべてのタイルを削除すると、その列は消えます (コンテンツの有無にかかわらず固定幅にスタイル設定しない限り、gridster にはこの制限はありません)。
于 2012-11-13T12:52:13.827 に答える
3

ここでの問題はドラッグ アンド ドロップではなく、フロートされた要素の流れです。

"four" の後のすべての要素はそれに合わせて配置され、より高いため、より多くのスペースが必要になります。したがって、「four」の前の 2 行目のスペースは、実際には「グリッド」の一部ではありません。

フローティング要素を操作しているため、実際にはここにはグリッドはありません。

これが、現在のスタイリングとスクリプトでは実現できない理由を理解するのに役立つことを願っています.

于 2012-11-12T00:12:42.777 に答える
2

私はこのエレガントなプラグイン、 ShapeShiftを見つけました。

ここで共有する価値があると思われる、gridster の別のフォーク バージョンがあります。

于 2012-11-21T18:57:25.473 に答える