我使用JQuery UI实现了一个具有拖动功能的元素,游标类型为“move”.我有一个元素,它嵌套在可拖动的div中,我们称之为’inner’,它有一个onclick事件,当你将鼠标悬停在它上面时,光标变为“pointer”(通过CSS).

我想要实现的目标：

>无论鼠标在哪个元素上,无论是在内部还是可拖动,我都希望无论何时拖动光标都可以“移动”光标.
>我还希望内部在悬停或点击时有一个游标类型的“指针”.但是一旦你开始拖动它,光标应该变为“移动”.

实际发生了什么

当光标在内部,并且开始拖动时,光标保持“指针”,它不会变为“移动”.

我试过了：

#draggable *:active {
  cursor: move;
}

会发生什么,当你点击不拖动内部时,光标变为“移动”.

只有在拖动div时,如何才能使光标变为“移动”？

JSFiddle

解决方法:

在拖动元素时,会将类.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：pointer：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;
}