jQuery UI Drag and Drop/Sortable Drop on empty，在 Chrome

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，我需要它来覆盖一些我无法追踪的更高优先级的填充。