元素被拖出后使元素可以放下
问题描述:
此“就座图表”视图显示“座位”的网格。他们大多数都是从一个已经在里面的学生开始。这些座位不是以“可放置物品”类开始的,因为我不希望用户将学生放到已经占用的座位上。一旦用户将学生拖出座位,该座位应该可以放下。元素被拖出后使元素可以放下
我也在努力从新座位上删除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,但现在我不再需要该功能。好像有一天别人需要的东西。