0

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

4

1 回答 1

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”后,记得先计算事件的持续时间,以便计算和更新事件的“停止时间”。

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

于 2013-07-02T20:56:50.977 回答