在元素被拖出后使 div 可放置答案

【问题标题】：Make a div droppable after element is dragged out在元素被拖出后使 div 可放置
【发布时间】：2016-09-29 11:06:33
【问题描述】：

此座位表视图显示了一个“座位”网格。他们中的大多数都是从已经在里面的学生开始的。这些座位不是以“droppable-item”类开头的，因为我不希望用户将学生放到已经占用的座位上。只要用户将学生拖出座位，该座位就应该可以放置。

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

我读过的所有解决方案都建议我销毁原始的 droppable。但这似乎不适用于这里，因为这个视图包括十几个 droppables。

下面的代码包括我尝试完成这项工作。旧座位确实获得了应有的“可放置物品”类，但似乎不接受任何学生。

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($(this).parent().attr("id"))

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

提前感谢您提供任何见解。

【问题讨论】：

标签： jquery coffeescript droppable

【解决方案1】：

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

我从来没有弄清楚如何在页面加载后使 div 可放置，但现在我不再需要该功能。似乎总有一天别人会需要的东西。

【讨论】：