8

複数のソート可能なリストが並んでいます。div の幅を変更して、他のリストをカバーすることができます。これにより、1 つのアイテムを複数のリストの一部にすることができます。

ソート可能なdivが重ならないようにこれを行いたいです。

http://jsfiddle.net/2J6af/でフィドルを参照してください。

編集：上記のフィドルに移動してソート可能なアイテムの幅を拡張する場合は、移動してドロップします。他の並べ替え可能なアイテムと重なっていることがわかります。並べ替え可能なすべてのアイテムが重ならないように配置したい。

編集: @KateA によって提案されているように、重複する jQuery の並べ替え可能なリストを再び扱いましたが、似ていますが、複数のリストをカバーする並べ替え可能なアイテムではなく、重複するリストについて話しています。

編集:完成品には7つのリストが並んでおり、ユーザーがアイテムをドロップした後、ソート可能なものを特定の順序で再配置する必要があります。sort: イベントに関数を追加できることは知っていますが、おそらくこれは、ソート可能なアイテムの重なりを再配置およびチェック/修正するための重要な関数でしょうか?

編集:左または右のハンドルを使用してサイズを変更したかどうかに応じて、ドラッグ時のソート可能なアイテムの動作が異なることにも気付きました。どのリストにカーソルを合わせているか混乱します。たとえば、左ハンドルを使用してサイズを変更し、それを拾って中央または右のリストにドロップしようとすると、マウス ポインターの下に空のプレースホルダーが表示されている場所ではなく、マウス ポインターの左側にある次のリストにドロップされます。マウスポインター。

編集: jquery fullCalendar は私が必要とするものを正確に実行しますが、どのようにそれを行いましたか? http://arshaw.com/fullcalendar/

編集:私は、ソート可能な知識の範囲でフィドルを拡張することに取り組んできました。私は正しい方向に進んでいると思いますか? http://jsfiddle.net/2J6af/17/

4

2 に答える 2

3

fullcalendarは、背景に視覚的なグリッドがあり、並べ替え可能なアイテムが仮想グリッドの上にあるように見えるため、位置を手動で計算している可能性が最も高いです。

jQueryUI が Sortable を実行する方法は、リストにプレースホルダーを追加することです。これにより、当然 (ページ フロー) にdropのスペースが表示されます。このようにしないことをお勧めします.jQueryUIをきれいにハックして、探している動作を実現する方法はないと思います.

fullcalendar と同じことを行い、ドラッグ可能でサイズ変更可能なプラグインを使用し、要素が他のアイテムと重なっている場合は絶対位置を使用して邪魔にならないように要素を移動することをお勧めします。

スナップ機能をドラッグ可能に設定しないでください。ただし、ドラッグ可能の位置に基づいて、衝突を計算し、衝突を処理する方法を決定して、上または下に移動します。

于 2012-04-18T07:26:59.060 に答える
2

あなたが試みていることにはいくつかの問題がありますが、それらのいくつかを修正する例を作成することができました. 全体的な問題は、これら 2 つの Jquery UI プラグイン (並べ替え可能、サイズ変更可能) が必要なすべての機能をサポートしていないため、両方ではないにしても少なくとも 1 つを書き直すか、ゼロから実装する必要があることです。いくつかの問題は次のとおりです。

  1. 西のハンドルによって幅が増加し、css の「左」プロパティが減少して、左側のリスト アイテムに問題が発生します。同じ問題が東と右側に存在します。
  2. リスト項目を「相対」または「絶対」に配置すると、ページの流れでスペースを占有しないため、重複が発生します。
  3. 3 つの個別の div があるということは、各アイテムが 1 つのリストのメンバーにしかなれないことを意味し、幅をチェックして他の列も占有しているかどうかを確認する必要があります。少し面倒です。

私が提供した例に加えて、各項目とそれが存在する列を追跡し、必要に応じて表示を修正できるようにするデータモデルをプログラムで保持する必要があると思います。

これはすべて、1週間を表すことと、その時間枠で起こっていることに関連していることをまとめました. あなたの質問の主な問題に対処したと思いますが、この問題は面白いと思います。より多くのコンテキストを提供していただければ、最終製品を喜んでお手伝いします.

于 2012-04-14T17:30:46.360 に答える