Question

此座位图视图显示＆＃34;席位＆＃34;的网格。他们中的大多数都是从已经在里面的学生开始这些座位不以＆＃34; droppable-item＆＃34;开头。因为我不希望用户将学生放入已经占用的座位。一旦用户将学生拖出座位，该座位就会变得可以放置。

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

我读过的所有解决方案都表明我销毁了原始的dropable。但这似乎并不适用于此，因为此视图包含十几个droppables。

以下代码包括我尝试完成这项工作。旧座位确实获得了＆＃34; droppable-item＆＃34; class 喜欢它，但似乎不接受任何学生。

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（＆＃34; ID＆＃34））

是我试图调试，看看旧座位是否可以成为学生的父母。但是，原来占用的座位都不能通过这条线路登录到控制台。只有在页面加载时空的座位。

提前感谢您的任何见解。

Answer 1

在尝试解决这个问题时，我意识到更好的方法是创建一个不是座位的“临时临时区”。当用户将学生放到已经占用的座位上时，旧学生将被转移到临时区域。

我从未弄清楚如何在页面加载后使div可以删除，但现在我不再需要该功能了。似乎有一天其他人会需要的东西。

拖出元素后使div可拖放

1 个答案: