如何在加载页面后使元素可下垂？

Question

最基本的情况是，我有一个日期/时间网格，其中包含对每个日期/时间的保留。用户将要从列表中保留的项拖到每个可下垂的插槽中，这样做很好。

初始化时，网格加载现有的保留，并由我的PHP脚本放置到槽中。在这一点上，保留槽不应该，也不可以下垂(因为它已经被保留了)。在activeclass函数中使用droppabe可以直观地看出这一点--保留的单元格没有用活动单元突出显示，也不能接收可拖放的单元格。

初始化时的可删除性：

<div id="slot-1" class="slot reserved">
    <div id="item-1" class="item ui-draggable ui-draggable-handle">RsvnName</div>
</div>

<div id="slot-2" class="slot available ui-droppable" ></div>

然后，我使用accept: checkReservation确保在允许删除之前插槽是空的，如果允许删除，则使用两个可丢弃项的removeClass和addClass“交换”可用/保留类，这样就可以将现在没有保留的插槽放到另一个项中并保留。我应该指出，在checkReservation中返回无条件的true对问题没有任何影响。

相关JS

$(".available").droppable({
    accept: acceptReservations,
    activeClass: "candrop",
    drop: function(event, ui) {
            $(ui.draggable).parent().addClass('available');
            $(ui.draggable).parent().removeClass('reserved');

。。。

function acceptReservations(ele) {
    // Slot may only contain 1 Item
    canReserve = ($(this).find(".item").length > 0) ? false : true;
    return canReserve;
}

将项目从一个插槽移动到另一个后，可删除

<div id="slot-1" class="slot available"></div>
<div id="slot-2" class="slot reserved" >
    <div id="item-1" class="item ui-draggable ui-draggable-handle" >RsvnName</div>
</div>

显然addClass/removeClass不足以告诉jQuery插槽现在是可下垂的。删除后的HTML在视觉上是正确的，但是jQuery不知道空槽现在应该是可下垂的。我确实尝试过.addClass('ui-droppable')，但这并没有影响，所以在我看来，很明显，我错过了一个关键的步骤，使现在空空如也的插槽可以下垂。

因此，真正的问题似乎是如何使一个元素在最初加载页面时不可下垂。

Answer 1

在切换类之前，您必须先将当前的销毁或禁用 (无论哪个更适合您)的当前可下垂

$(".available").droppable("destroy"); // destroy the existing droppable - which is now reserved.

然后重新初始化新的可排序程序。

$(".available").droppable({ // now initialize the newly available droppable.
 accept: acceptReservations,
 activeClass: "candrop",
 drop: function(event, ui) {
      $(ui.draggable).parent().addClass('available');
      $(ui.draggable).parent().removeClass('reserved');
      ...

附带注意:在描述中，您提到您使用的是accept: checkReservation__，但在实际代码中您使用的是accept: acceptReservations