Question

基本情况是我有一个天数/时间网格，其中包含对每个人的预订。用户将要从列表中保留的项目拖放到每个可放置的插槽中，这样可以正常工作。

在初始化时，网格加载了现有的预留，并通过我的PHP脚本放入插槽中。在那一点，保留的插槽不应该，并且不可丢弃（因为它已被保留）。通过在activeclass函数中使用droppabe，这在视觉上是明显的 - 保留的单元格不会使用activeclass突出显示，并且无法接收可拖动的。

初始化时的Droppables：

<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确保插槽在允许丢弃之前是空的，如果允许丢弃，则将{/ 1}}和removeClass的可用/保留类“交换”两个droppables，以便现在无保留的插槽可以放入并保留不同的项目。我应该提一下，在checkReservation中返回一个无条件的true对问题没有影响。

相关JS

addClass

。。

$(".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;
}

显然addClass / removeClass不足以告诉jQuery插槽现在是可以删除的。丢弃后的HTML在视觉上是正确的，但jQuery不知道空插槽现在应该是可放置的。我做了尝试<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>，但这没有任何影响，所以我似乎很清楚我错过了一个重要的步骤，让现在空的插槽可以放置。

所以，看起来真正的问题是如何制作一个在最初加载页面时不可删除的元素可放置。

Answer 1

在切换课程之前，您必须destroy或disable（对您来说更适合）当前droppable

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

然后重新初始化新的sortable。

$(".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

如何在页面加载后使元素可以删除？

1 个答案: