jquery - 如何让 ui-sortable 仅适用于 CSS 中的特定 id？

Question

我有一个可排序的 .column 类元素。我在该列中有两个 ID:

<div id="column1" class="column ui-sortable">
<div id="column2" class="column ui-sortable">

我希望当鼠标悬停在上面时有一只张开的手，当仅在第 1 列上拖动时有一只闭合的手。如果我的 CSS 看起来像这样:

.ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
#column1 .ui-sortable-helper{
    cursor: grabbing;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

然后张开的手显示在 column1 和 column2 上，闭合的手显示在被拖动的 column1 上。但是因为我只想在 column1 上张开手，所以我尝试了:

#column1 .ui-sortable{
    cursor: grab;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

但这对 column1 没有任何作用。我得到一个默认光标。为什么添加 id 在 .ui-sortable-helper 上有效，但在 ui-sortable 上无效？如何让张开的手只出现在 column1 上？

谢谢!

Answer 1

您需要的 CSS 规则是:

#column1.ui-sortable

因为您要指定具有 id '#column1' 且具有 class 'ui-sortable' 的元素，而不是任何具有 'ui 类的元素-sortable' 是 '#column1' 的子项。

由于下面的讨论，我添加了一些关于 CSS 类和元素的基本信息:

<div id="column1" class="column ui-sortable">

此元素有一个 ID“column1”，您通过 # 符号 + IDname 在 CSS 中引用一个 ID，因此在本例中为“#column1”。该元素还有两个类“column”和“ui-sortable”。在您的情况下，您只想将 CSS 规则应用于此特定元素。您可以通过使用 ID-Selector 简单地做到这一点:

#column1 { }

在你的问题中你使用了:

#column1 .ui-sortable { }

这将被解释为通过 ID '#column1' 和该父项的所有嵌套元素找到一个具有类 'ui-sortable' 的元素。不匹配 - 因为元素本身有类，而不是子元素。如果您删除 CSS-Selector 的空格:

#column1.ui-sortable { }

它被解释为通过 ID '#column1' 找到一个具有类 'ui-sortable' 的元素 这可能有点过重，因为 id 应该是唯一的，但它解决了你的问题。类为“ui-sortable-helper”的元素是 div#column1 的子元素，因此您需要在此处留出空间。

<div id="column1" class="column ui-sortable">
    <div class="ui-sortable-helper">
    </div>
</div>

所以选择器必须有一个空格:

#column1 .ui-sortable-helper { }