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

Question

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

我想要实现的目标：

• 无论您的鼠标在哪个元素上，无论是在inner 还是draggable，我都希望光标在您拖动时“移动”。
• 我还希望inner 在悬停或单击时具有“指针”类型的光标。但是一旦你开始拖动它，光标就会变成“移动”。

实际发生的情况

当光标在inner上时，你开始拖动，光标停留在“指针”上，不会变为“移动”。

我试过了：

#draggable *:active {
  cursor: move;
}

发生的情况是，当您单击不拖动inner 时，光标变为“移动”。

如何让光标只有在拖动 div 时才会“移动”？

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

类.ui-draggable-dragging在被拖动时添加到元素中。

因此，您可以使用此类来确定#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: inherit 覆盖 cursor: pointer：

Example Here

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

---

还值得一提的是，如果.ui-draggable 元素的类为.ui-draggable-dragging，则您可以使用单个选择器来实现此目的：

Example Here

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