Сделайте div droppable после вытаскивания элемента

Question

В этом окне «Гостиный график» показана сетка «сидений». Большинство из них начинаются со студента, который уже внутри. Эти места не начинаются с класса «droppable-item», потому что я не хочу, чтобы пользователь бросал ученика в уже занятое место. Как только пользователь вытащит студента из кресла, это место должно стать недоступным.

Я также борюсь с удалением класса droppable с нового места, но, возможно, это должен быть другой вопрос.

Все предлагаемые нами решения говорят о том, что я уничтожаю оригинальную droppable. Но это, похоже, не применимо здесь, потому что это представление включает в себя десяток droppables.

В приведенный ниже код включена моя попытка выполнить эту работу. Старое сиденье приобретает «droppable-item» класс, как и предполагалось, но, похоже, не принимает студентов.

seminars.coffee

ready = -> 
    currSeating = $('.tyrion').val().split(" ") 

    $('.draggable-item').draggable 
     stack: '.droppable-item' 
     stack: '.draggable-item' 
     start: (event, ui) -> 
      console.log($(this).parent().attr("id")) 
      seat = $(this).closest(".seat").attr("id")-1000; 
      currSeating[seat] = 0 
      $(this).parent().addClass("droppable-item") 
      $(this).parent().droppable 
       #I've tried placing all of the droppable function lines here too. But I'm sure that isn't the correct approach. 


    $('.droppable-item').droppable 
     drop: (event, ui) -> 
      justdragged = $(ui.draggable) 
      kid = justdragged.attr("id") 
      seat = $(this).attr("id")-1000 
      currSeating[seat] = kid 
      $('.tyrion').val(currSeating) 
      $(this).append(justdragged.removeAttr('style')) 
      $(this).removeClass("droppable-item") 

$(document).on('turbolinks:load', ready) 

seatingChart.html.erb

<% def makeARow(group) %> 
    <div class="row"> 
     <% group.each do |eyedee| %> 
      <% if eyedee and eyedee.to_i > 0 %> 
       <div class = "col-md-2 seat" id="<%= @counter %>"> 
        <% student = Student.find(eyedee) %> 
        <div class="draggable-item" id="<%= student.id %>"> 
         <li id="<%= student.id %>" > 
          <%= "#{student.firstPlusInit}" %> 
         </li> 
        </div> 
       </div> 
      <% else %> 
       <div class = "col-md-2 seat droppable-item" id="<%= @counter %>"> 
       </div> 
      <% end %> 
      <% @counter = @counter += 1 %> 
     <% end %> 
    </div> 
<% end %> 


<div class = "container-fluid"> 
    <% @counter = 1000 %> 
    <% @seminar.seating.in_groups_of(6).each do |group| %> 
     <% makeARow(group) %> 
    <% end %> 
    <% newgroup = [0,0,0,0,0,0] %> 
    <% makeARow(newgroup) %> 
</div> 

Линия

console.log ($ (это) .parent(). Атр («id»))

is me t чтобы отладить и посмотреть, может ли старое место стать родительским подразделением для студентов. Но ни одно из первоначально занятых мест не может быть зарегистрировано на консоли через эту линию. Только места, которые были пустыми при загрузке страницы.

Заранее благодарю за понимание.

Answer 1

При попытке решить эту проблему я понял, что лучшим подходом было бы создать «временную промежуточную зону», которая не является местом. Когда пользователь бросает ученика на уже занятое место, старый ученик перемещается в промежуточную зону.

Я никогда не выяснял, как сделать divs droppable после загрузки страницы, но теперь мне больше не нужны эти функции. Похоже на то, что кому-то понадобится когда-нибудь.