0

I have, with help from this forum, managed to understand and get working drag and drop (using JQuery) for a single list which allows the list to be re-ordered and the MySQL database updated. I want to extend this for a simple calendar and I'd like some guidance in two areas: (a) How can I identify the location of the item after the drop. The database values will give me its initial position. I can identify this information from the DOM using the left and top positions for the text node. But is reading these values for the element in the DOM the best way to go ? (b) How can I extend the code for multi-column ? If I know the starting column of the the item being dropped, I can easily compute the new start date and so update the database. Any help to point me in the right direction appreciated !

1 Answer 1

1

I am building a weekly drag-and-drop calendar in rails & jQuery and this is how I did it:

I have a weekly table with rows containing td's that are droppable , and draggable div's inside the td's that look like this:

<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>

I have a script tag at the bottom with this:

      <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>

When the draggable div is dropped, it triggers a POST that looks like this:

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"}

From there I do my thing, finding event #78, and update the date and start & stop time.

Hint: After the event "find", remember to compute the duration of the event first, so that you can compute & update the "Stop Time" of the event.

I am also doing a drag & drop monthly calendar using a simpler version of the above code (there is no "time" param, only dates), so I will omit it. Hopefully this answers your question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.