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

Posted 2023-05-08

【中文标题】jQuery UI Drag and Drop/Sortable Drop on empty，在 Chrome

【英文标题】：jQuery UI Drag & Drop/Sortable Drop on empty, in Chrome

【发布时间】：2011-10-18 15:10:04

【问题描述】：

我正在使用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 中没有区域可放置

有什么想法吗？

【参考方案1】：

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

#sortablelist 
  padding: 16px 21px !important;

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

【讨论】：

发现了问题（我正在与 jordan 合作）——我们实际上是使用 span 而不是 div 来保存元素列表，因此没有应用填充。将所有元素包装在一个 div 中，按照您的建议添加填充，我们可以开始了！ +1，谢谢。

很好，很高兴你知道了！

终于！这一直让我发疯，但这完美无缺，我不敢相信我没有想到这一点。