Question

以下是我要做的事情：

我有一个'日历'，它由5列组成，每列有5个div，它们是timeslots。我正在每个timeslots中显示约会，并已实施JQuery Sortable，以便将约会从一个timeslot移动到另一个，或转移到另一个列（代表天数）。我希望在移动完成后实施AJAX调用，以便在日历中更新我的数据库并反映约会更改。

问题：

将约会从A列移至列B后，我不确定如何获取新的日期和时间。通常，我会使用Javascript通过搜索DOM来获取此数据，直到找到我需要的数据。但是当使用sortable时，我无法获得新列，因为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>

以下是我正在使用的Javascript来移动li元素：

$("._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');从新列中获取新日期，但我得到的是旧日期。我怎样才能获得新信息？

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

Answer 1

只需改变：

$(this).parent().parent().parent().parent().attr('id');

为：

$(e.toElement).parents(".column").attr("id")

http://jsfiddle.net/Mt7LF/

使用'Sortable'时获取新的元素信息

1 个答案: