光标类型：仅在拖动时移动

Question

我使用 JQuery UI 实现了一个具有拖动功能的元素，光标类型为 "move"。我有一个元素，它嵌套在 draggable div 中，我们称它为 'inner'，它有一个 onclick 事件，当您将鼠标悬停在它上面时，光标会变为 "pointer" （通过 CSS）。

我想达到的目标：

我希望无论鼠标在什么元素上，无论是在 inner 还是 draggable.
我还希望 inner 在悬停或单击时具有 "pointer" 的光标类型。但是一旦你开始拖动它，光标应该变成 "move".

实际发生了什么

当光标在 inner 上并开始拖动时，光标停留在 "pointer"，不会变为 "move"。

我试过了：

#draggable *:active {
  cursor: move;
}

发生的情况是，当您单击而不是拖动时 inner，光标变为 "move"。

怎样才能让光标在拖动div的时候变成"move"？

JSFiddle

$('#draggable').draggable({
  cursor: "move"
});

$('#inner').click(function() {
  $(this).css('background-color', 'orange');
});

#draggable {
  background-color: pink;
  width: 200px;
  height: 200px;
}
#inner {
  background-color: red;
  width: 100%;
  height: 50px;
}
#inner:hover {
  cursor: pointer;
}
/*
#draggable *:active {
  cursor: move;
}
*/

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">



<div id="draggable">
  <div id="inner"></div>
</div>

Answer 1

class .ui-draggable-dragging 被添加到被拖动的元素上。

因此，您可以使用此 class 来确定是否正在拖动 #inner 元素。只需使用选择器 .ui-draggable-dragging #inner，然后设置 cursor: move:

Updated Example

#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: move;
}

$('#draggable').draggable({
  cursor: "move"
});

$('#inner').click(function() {
  $(this).css('background-color', 'orange');
});

#draggable {
  background-color: pink;
  width: 200px;
  height: 200px;
}
#inner {
  background-color: red;
  width: 100%;
  height: 50px;
}
#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: move;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">



<div id="draggable">
  <div id="inner"></div>
</div>

由于 jQuery UI 已经在拖动元素时在 body 元素上设置 cursor: move，您也可以只覆盖 cursor: pointer cursor: inherit:

Example Here

#inner {
  cursor: pointer;
}
.ui-draggable-dragging #inner {
  cursor: inherit;
}

同样值得一提的是，如果 .ui-draggable 元素的 class 为 .ui-draggable-dragging:

，您可以通过取反 .ui-draggable 元素来使用单个选择器实现此目的

Example Here

.ui-draggable:not(.ui-draggable-dragging) #inner {
  cursor: pointer;
}

光标类型：仅在拖动时移动

Cursor type: move ONLY when drag