使用“可排序”时获取新元素信息

这是我正在尝试做的事情：

我有一个"日历"，它由 5 列组成，每列有 5 个div，它们是timeslots.我在每个timeslots中显示约会，并实现了 JQuery Sortable，以便将约会从一个timeslot移动到另一个，或移动到另一个列（表示天）。我想在移动完成后实施AJAX呼叫，以便更新我的数据库，并在日历中反映约会更改。

问题：

将约会从第 A 列移动到第 B 列后，我不确定如何获取新的日期和时间。通常，我会使用 Javascript 通过搜索 DOM 来获取这些数据，直到找到我需要的数据。但是当使用可排序列时，我无法获取新列，因为 DOM 似乎仍然代表旧列。

问题：

如何在使用 Sortable 接口时获取我放置元素的位置的 DOM？

这是我的 HTML，为了简单起见，它被压缩了：

<div class="column" id="day1">
        <div class="route_container">
            <div class="date"></div>
            <button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
            <div class = "truck" id="day1_route1">
                <h3>8-10</h3>
                <div class="timeslot" id="d1_1">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>10-12</h3>
                <div class="timeslot" id="d1_2">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>12-2</h3>
                <div class="timeslot" id="d1_3">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>2-4</h3>
                <div class="timeslot" id="d1_4">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>4-6</h3>
                <div class="timeslot" id="d1_5">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="column" id="day2">
        <div class="route_container">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day2_route1">
                <h3>8-10</h3>
                <div class="timeslot" id="d2_1">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>10-12</h3>
                <div class="timeslot" id="d2_2">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>12-2</h3>
                <div class="timeslot" id="d2_3">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>2-4</h3>
                <div class="timeslot" id="d2_4">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
                <h3>4-6</h3>
                <div class="timeslot" id="d2_5">
                    <ul class="_ts">
                        <li><a   class="new_appt" href="#">Open</a></li>
                        <li><a   class="new_appt" href="#">Open </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

这是我目前用来移动li元素的Javascript：

$("._ts").sortable({
    connectWith: "._ts", 
    revert: "true",
    cancel: ".new_appt", 
    stop: function(){
        var date = $(this).parent().parent().parent().parent().attr('id'); 
        alert("this is the new date: " + date); 
        $.ajax({
            type: "post",
            dataType: "json",
            url: ajaxurl, 
            data:{action: "update_appointments", date: date, timeslot: timeslot},
            success: function(response){
                if(response.type = "success"){
                    add_appointment(date, response.appt, col);  
                }
            }
        });
    }
});

就目前而言，我正在尝试使用该var date = $(this).parent().parent().parent().parent().attr('id');从新列中获取新日期，但我正在获取旧日期。如何获取新信息？

如果还有其他需要，请告诉我。