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

Question

我正在开发一个项目，在一个可放置的地方需要很多可拖动的项目，我知道如何用各种选项创建可拖动和可放置的项目，但我想做的是给这些自定义外观。有没有办法做到这一点？我一直在搜索谷歌'jquery change draggable shape'和其他没有运气的变种。

Answer 1

取决于您需要多少自定义。如果你只需要一些CSS调整，then：

  

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

因此，您可以在.ui-draggable-dragging以及其他任何其他选择器上修改您的更改。

如果你想做的事情需要的不仅仅是几个CSS调整，那么你可以使用helper option自己呈现整个可拖动的版本：

  

允许使用辅助元素拖动显示。可能的值：'original'，'clone'，Function。如果指定了函数，则必须返回DOMElement。

所以这样的事情会提供很大的灵活性：

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

Answer 2

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

Answer 3

我记得using this technique将一个自定义类添加到克隆的拖动助手中。

没有尝试使用最近的jquery ui版本，但这仍然有用。

然后，您可以将CSS应用于自定义类。

如果你真的想发疯，你也可以在启动事件触发时在ui.helper元素中添加其他html元素。只需使用标准的jquery append，prepend，whatnot ..