拖放日曆

在此論壇的幫助下，我已經理解並獲得了對單個列表的工作拖放操作（使用JQuery），允許列表重新排序並更新MySQL數據庫。我想擴展一個簡單的日曆，我想在兩個方面提供一些指導：（a）如何在放置後識別物品的位置。數據庫值將給我它的初始位置。我可以使用文本節點的左側和頂部位置從DOM中識別此信息。但是，閱讀DOM中元素的這些值是最佳方式嗎？（b）如何擴展多列的代碼？如果我知道被刪除項目的起始列，我可以輕鬆計算新的開始日期並更新數據庫。任何幫助指向我在正確的方向讚賞！拖放日曆

來源

2013-06-02 peter300

我在軌建立每週拖和下降日曆& jQuery和我這是怎麼做的：

我有一個每週表包含行TD的是投擲的，並且可拖動div的內部對TD的是這個樣子的：

<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-02 20:56:50

回答

相關問題