光標類型：拖動時僅移動

Question

我使用JQuery UI實現了一個具有拖動功能的元素，游標類型為“move”。 我有一個元素，它嵌套在draggable div ，我們稱之為'inner'，它有一個onclick事件，當你將鼠標懸停在它上面時，光標變為“pointer”（通過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元素時，會將類.ui-draggable-dragging添加到元素中。

因此，您可以使用此類來確定是否正在拖動#inner元素。 只需使用選擇器.ui-draggable-dragging #inner ，並設置cursor: move ：

更新的示例

#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在拖動元素時cursor: move body元素，你也可以只用cursor: inherit覆蓋cursor: pointer cursor: inherit ：

這里的例子

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

---

還值得一提的是，如果它有一個.ui-draggable-dragging類，你可以通過否定.ui-draggable元素來使用單個選擇器來實現這個目的：

這里的例子

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