jquery可以通过全屏填充来进行排序

Question

我有一些连接的，可排序的列表工作得很好。当我将浏览器窗口设置为半屏时，我甚至可以通过点击填充来获取列表项，这就是我想要的。但是，当我最大化浏览器窗口时，我只能通过其文本获取列表项。这是尴尬和用户不友好。无论窗口大小如何，我都希望填充作为“命中区域”。到目前为止，我只在Chrome中对此进行了测试。

视图：seatingChart.html.erb

<div class = "container-fluid">
    <div class = "row">
        <% @students.in_groups(6).each do |group| %>
            <div class = "col-md-2">
                <ul class='sortable-list'>
                <% group.each do |student| %>
                    <% if student %>
                        <li class="sortable-item">
                            <%= student.firstPlusInit %>
                        </li>
                    <% end %>
                <% end %>
                </td>
            </div>
        <% end %>
    </div>
</div>

coffeescript with jquery：seminars.coffee

ready = ->
    $('.sortable-list').sortable({connectWith: '.first-column', placeholder: 'my-placeholder'})

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

的CSS：

.sortable-item {
  list-style-type: none;
  border: 1px solid black;
  width: 140px;
  height: 30px; 
  border-radius: 24px;
  text-align: center;
  padding-top: 5px;
}

.my-placeholder {
  list-style-type: decimal;
  background: #AAFFAA;
  border: 1px dashed gray;
  width: 140px;
  height: 30px;
}

模特的适用方法：student.rb

# Returns first name with limit plus last initial
def firstPlusInit
    "#{first_name[0,15]} #{last_name[0,1]}" 
end

提前感谢您的任何见解。