拖放日历

Question

在这个论坛的帮助下，我设法理解并开始对单个列表进行拖放（使用 JQuery），该列表允许重新排序列表并更新 MySQL 数据库。 我想将此扩展为一个简单的日历，并且我想在两个方面获得一些指导： (a) 如何识别物品掉落后的位置。数据库值会给我它的初始位置。我可以使用文本节点的左侧和顶部位置从 DOM 中识别此信息。但是为 DOM 中的元素读取这些值是最好的方法吗？ (b) 如何扩展多列的代码？如果我知道要删除的项目的起始列，我可以轻松计算新的开始日期并更新数据库。 任何帮助我指出正确的方向表示赞赏！

Answer 1

我正在 Rails 和 jQuery 中构建每周拖放日历，我就是这样做的：

我有一个周表，其中包含可放置的 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，并更新日期和开始和停止时间。

提示：事件“find”后，记得先计算事件的持续时间，以便计算和更新事件的“停止时间”。

我还使用上述代码的更简单版本（没有“时间”参数，只有日期）进行拖放月历，所以我将省略它。希望这能回答您的问题。