Question

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

Answer 1

我正在使用rails＆amp; amp ;; 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，并更新日期和开始＆amp;停止时间。

提示：事件“查找”之后，请记住先计算事件的持续时间，以便计算＆amp;更新活动的“停止时间”。

我也在做一个拖累和放大使用上述代码的简单版本删除月历（没有“时间”参数，只有日期），所以我将省略它。希望这能回答你的问题。

拖放日历

1 个答案: