jquery-ui - Chrome 中的 jQuery UI 拖放/可排序拖放为空

Question

我正在使用jQuery UI Sortable function .

Javascript

$('#sortablelist).sortable{
     update: function(ev, ui){...}, 
     placeholder: "ui-state-highlight",
     connectWith: ".ui-sortable" 
}

默认情况下，dropOnEmpty = true，所以我不设置它。

因为列表是空的，但我想在空列表中给它一个“占位符”目标，所以我给了 sortablelist div 一个额外的辅助类来给空的 # sortablelist 可以说是一些要放入的“表面区域”(这样当您将元素拖动到附加列表上时，您会得到一个占位符)

HTML

<div id="sortablelist" class="ui-sortable ui-sortable-helper"></div>

CSS

.ui-sortable-helpclass {
    height: 100px;
    width: 100%;
}

这适用于 Firefox、IE、Safari，，但占位符不会出现(因此在 Google Chrome 中没有可放置的区域

有什么想法吗？

Answer 1

我能够解决这个问题的唯一方法是向列表添加填充。

#sortablelist {
  padding: 16px 21px !important;
}

您可能不需要 !important，我需要它来覆盖一些我无法追踪到的更高优先级的填充。