javascript - 游标类型 : move ONLY when drag

Question

我使用 JQuery UI 实现了一个具有拖动功能的元素，光标类型为“移动”。我有一个元素，它嵌套在 draggable div 中，我们称它为“inner”，它有一个 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: pointer with cursor: inherit:

Example Here

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

---

还值得一提的是，如果它具有 .ui-draggable-dragging 类，您可以通过取消 .ui-draggable 元素来使用单个选择器实现此目的:

Example Here

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