如何更改 jquery UI 控件的形状或外观？

Question

我正在开发一个项目，需要在一个可放置位置上放置大量可拖动项目，我知道如何使用各种选项创建可拖动和可放置项目，但我想做的是给这些项目一个自定义外观。有办法做到这一点吗？我一直在谷歌搜索“jquery更改可拖动形状”和其他变体，但没有运气。

Answer 1

取决于您需要多少定制。如果您只需要进行一些 CSS 调整，那么：

可拖动元素的类别为
ui-draggable
在拖动过程中，元素也会获得一个类
ui-draggable-dragging

因此，您可以在 .ui-draggable-dragging 以及您必须缩小范围的任何其他选择器上进行更改。

如果您想做的事情需要的不仅仅是几个 CSS 调整，那么您可以使用 帮助器选项：

允许使用辅助元素来拖动显示。可能的值：“原始”、“克隆”、函数。如果指定了函数，则它必须返回 DOMElement。

所以像这样的东西会提供很大的灵活性：

$(...).draggable({
    //...
    helper: function(e) {
        return $('a bunch of pretty HTML');
    }
 });

Answer 2

您可以使用 css 更改所有 jQuery ui 样式的外观。他们甚至有一个主题生成器，可以轻松自定义外观此处

Answer 3

我记得使用这种技术添加不久前克隆的拖动助手的自定义类。

还没有尝试过最近的 jquery ui 版本，但应该仍然有效。

然后你可以将 css 应用到你的自定义类中。

如果您真的想疯狂，您还可以在启动事件触发时在 ui.helper 元素内添加其他 html 元素。只需使用标准的 jquery 附加、前置等等。