Question

我使用JQuery UI实现了一个具有拖动功能的元素，其游标类型为“move”。我有一个元素，它嵌套在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在拖动元素时已在cursor: move元素上设置了body，因此您也可以使用cursor: pointer覆盖cursor: inherit：

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;
}

光标类型：仅在拖动

JSFiddle

1 个答案: