페이지를로드 한 후 요소를 삭제할 수있게 만드는 방법은 무엇입니까?

Question

기본 시나리오는 각각의 예약을 포함 할 일/시간 표가 있다는 것입니다. 사용자가 예약 할 항목을 목록에서 삭제 가능한 각 슬롯으로 끌어 오면 정상적으로 작동합니다.

초기화시 그리드에 기존 예약이로드되고 PHP 스크립트에 의해 슬롯에 배치됩니다. 의 해당 지점에 예약 된 슬롯은 없어야하며 이미 예약되어 있으므로 삭제할 수 없습니다. 이것은 droppabe 함수에서 activeclass을 사용하여 시각적으로 명확합니다. 예약 된 셀은 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를 사용하고, 드롭이 허용되는 경우, "스왑"removeClass와 가능/예약 클래스와 addClass 두 개의 droppables 중 하나이므로 지금 예약되지 않은 슬롯을 다른 항목에 놓고 예약 할 수 있습니다. 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; 
} 

Droppables 다른

<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는 빈 슬롯이 이제는 삭제 가능하다는 것을 알지 못합니다. I 은이었습니다. .addClass('ui-droppable')을 시도했지만 아무런 영향이 없었으므로 지금은 빈 슬롯을 없애기위한 중요한 단계를 놓치고 있습니다.

그래서, 페이지를 처음로드 할 때 droppable이 아닌 요소를 삭제할 수있는 방법을 제시하는 것 같습니다.

Answer 1

당신은 전환 클래스

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

전에 destroy 또는 disable 현재 droppable (당신 바람직 중 )에 있고, 그 후 새로운 정렬을 다시 초기화됩니다.

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