jquery ui可排序占位符无法更改背景颜色

Posted 2023-03-05

【中文标题】jquery ui可排序占位符无法更改背景颜色

【英文标题】：jquery ui sortable placeholder cannot change background colour

【发布时间】：2012-07-16 09:44:21

【问题描述】：

我可以成功更改占位符的边框颜色，但是当我尝试更改背景颜色时，没有任何反应。

这个 jsfiddle 代码最好地解释了它：http://jsfiddle.net/EUVrK/1/

【参考方案1】：

根据jQuery UI Sortable Documentation，您可以为占位符提供一个css类。您应该能够在此类中指定背景。

使用占位符和 forcePlaceholderSize 属性，它就像一个魅力。 我已经更新了 jsfiddle link

希望对您有所帮助。

【讨论】：

感谢您抽出宝贵时间帮助 p0wl。这个解决方案确实有效。然而，它使用了与我所追求的不同的代码布局/结构，即：它需要将样式分离到一个 CSS 类中并继承宽度参数，并将 foreplaceholderSize 设置为 true。当然，它可以解决问题，但是我在另一个答案中概述的解决方案（由 IRC 上的其他人提供）只需要在原始问题的代码中添加一行额外的 jQuery 代码。它相当优雅。也许你也觉得它有用？无论如何谢谢:)

你说的很对，但要看观点。我喜欢在 javascript 和 css 之间分开。虽然使用 jquery-ui 的标准参数可以有一个优势（例如使用 get 方法读取它）。

是的，按照您的方式将 Javascript 和 CSS 分开肯定是更好的做法。因此，我会将您的答案投票为正确答案（因为问题的标题没有提及 ui.placeholder 的低级调整）。

【参考方案2】：

我从 irc.freenode 上的一位朋友那里得到了一些帮助，他提出了以下解决方案。

ui.placeholder.css("visibility", "visible");
ui.placeholder.css("background-color", "red");

占位符的背景颜色没有显示，因为实际元素不可见（我想它默认设置为隐藏）。因此，将其设置为可见可以让人们看到不同的背景颜色。

【讨论】：

非常好。这是完美的。

你也可以通过 ui.placeholder.css("visibility":"visible","background-color":"red");

此代码应放在start 可排序事件中。 start: (e, ui) => ui.placeholder.css('visibility', 'visible'); ui.placeholder.css('background-color', 'red');

【参考方案3】：

CSS

.placeholderBackground背景颜色：#FD6FB7;

参数

$('.sortable').sortable( 轴：'y'，占位符：'placeholderBackground' ).disableSelection();