元素被拖出后使元素可以放下

问题描述:

此“就座图表”视图显示“座位”的网格。他们大多数都是从一个已经在里面的学生开始。这些座位不是以“可放置物品”类开始的,因为我不希望用户将学生放到已经占用的座位上。一旦用户将学生拖出座位,该座位应该可以放下。元素被拖出后使元素可以放下

我也在努力从新座位上删除droppable类,但这可能需要一个不同的问题。

我读过的所有解决方案都表明我销毁了原始的可拖拽。但这似乎并不适用于此,因为此视图包含十几个可放入的内容。

下面的代码包含了我尝试做这个工作。旧座椅确实收到了类似于应该的“可投入物品”,但似乎并未接受任何学生。

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()。ATTR (“id”))

is me t试图调试并查看旧座位是否可以成为学生的家长。但是通过这条线路,没有一个原来的座位能够被记录到控制台。只有页面加载时为空的座位。

非常感谢您的任何见解。

为了解决这个问题,我意识到一个更好的方法是创建一个不属于座位的“临时临时区域”。当用户将一名学生放到一个已经占用的座位上时,该老学生将被移动到临时区域。

我从来没有弄清楚如何使页面加载后,divs droppable,但现在我不再需要该功能。好像有一天别人需要的东西。