0

このフォーラムの助けを借りて、リストの並べ替えとMySQLデータベースの更新を可能にする単一のリストのドラッグアンドドロップ（JQueryを使用）を理解し、機能させることができました。これを単純なカレンダーに拡張したいと考えており、次の 2 つの分野でいくつかのガイダンスが必要です: (a) ドロップ後にアイテムの場所を特定するにはどうすればよいですか。データベースの値は、その初期位置を示します。この情報は、テキスト ノードの左と上の位置を使用して DOM から識別できます。しかし、DOM 内の要素のこれらの値を読み取るのが最善の方法でしょうか? (b) 複数列のコードを拡張するにはどうすればよいですか? ドロップされるアイテムの開始列がわかっている場合は、新しい開始日を簡単に計算してデータベースを更新できます。私を正しい方向に向ける助けがあれば感謝します!

4

1 に答える 1

1

RailsとjQueryで毎週のドラッグアンドドロップカレンダーを作成していますが、これが私が行った方法です:

droppable である td と、次のような td 内のドラッグ可能な div を含む行を含む週次テーブルがあります。

<tr>
<td><h4>12:00pm</h4></td>
<td class="droppable" data-date="2013-06-30" data-time="12:00pm"></td>
<td class="droppable" data-date="2013-07-01" data-time="12:00pm"></td>
<td class="droppable" data-date="2013-07-02" data-time="12:00pm">
<div class="draggable" data-id="78" data-update-url="/update_weekly_calendar/78">
<a href="/event/78/edit">12:00pm Event</a>
</div>
</td>
<td class="droppable" data-date="2013-07-03" data-time="12:00pm"></td>
<td class="droppable" data-date="2013-07-04" data-time="12:00pm"></td>
<td class="droppable" data-date="2013-07-05" data-time="12:00pm"></td>
<td class="droppable" data-date="2013-07-06" data-time="12:00pm"></td>
</tr>

私はこれで下部にスクリプトタグを持っています:

      <script>
        $('.droppable').droppable({
            accept: ".draggable",
            drop: function(event,ui) { 
                $.post( ui.draggable.data('update-url'), {date: $(this).data('date'), time: $(this).data('time')} );
                $(this).effect("highlight", {}, 1500);
            }
        })
        $('.draggable').draggable()
      </script>

ドラッグ可能な div がドロップされると、次のような POST がトリガーされます。

Started POST "/update_weekly_calendar/78" for 127.0.0.1 at 2013-07-02 13:42:27 -0700
Processing by CalendarsController#update_weekly as */*
Parameters: {"date"=>"2013-07-03", "time"=>"9:30am", "id"=>"78"}

そこから、イベント #78 を見つけて、日付と開始時刻と終了時刻を更新します。

ヒント: イベントの「検索」の後、イベントの「停止時間」を計算および更新できるように、最初にイベントの期間を計算することを忘れないでください。

上記のコードのより単純なバージョン (「時間」パラメーターはなく、日付のみ) を使用して、月間カレンダーをドラッグ アンド ドロップすることも行っているので、省略します。うまくいけば、これはあなたの質問に答えます。

于 2013-07-02T20:56:50.977 に答える