Question

I am building an event calendar and using the sortable function in jQuery. My goal is to allow users to drag events to any day on the calendar.

A day can have multiple events, and my day DIV looks like this.

<div>
  <ul id="day1" class="day">
    <li class="eventDetail" id="1_1">Event 1</li>
    <li class="eventDetail" id="1_2">Event 2</li>
    <li class="eventDetail" id="1_3">Event 3</li>
  </ul>
</div>

Here’s my sortable function

$(".eventDetail").sortable({
    connectWith: ".eventDetail",
    update: (function(event, ui){
        alert($(this).text());
    })
}).disableSelection();

I am using the update parameter to alert the current text value. However, I am receiving ALL text values for a given group of LI’s. E.G, For the one above my alert looks like “EVENT 1, EVENT 2, EVENT 3” – Why?

Thanks!

Answer 1

Try this instead:

...
update: (function(event, ui){
    alert($(ui.item).text());
    alert($(ui.placeholder).text());
}
...