我实现了一个元素，使其具有JQuery UI与“ move”游标类型一起使用的拖动功能。我有一个嵌套在中的元素，draggable div我们称它为“内部”，它有一个onclick事件，当您将鼠标悬停在其上时，光标变为“指针”（通过CSS）。
我想要实现的目标：
inner还是）draggable。inner每当悬停或单击时，我还希望具有“指针”的游标类型。但是一旦开始拖动它，光标应更改为“ move”。实际发生了什么
当光标位于上inner并开始拖动时，光标停留在“指针”上，不会更改为“移动”。
我试过了：
#draggable *:active {
cursor: move;
}
发生的是，当您单击“不拖动”时inner，光标变为“移动”。
仅当您拖动div时，如何才能使光标变为“移动”？
$('#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>.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了上body被拖动的元素时元素，你也可以只覆盖cursor: pointer有cursor: inherit：
#inner {
cursor: pointer;
}
.ui-draggable-dragging #inner {
cursor: inherit;
}
还值得一提的是，.ui-draggable如果元素具有的类，则可以通过取消选择该元素来实现此目的.ui-draggable-dragging：
.ui-draggable:not(.ui-draggable-dragging) #inner {
cursor: pointer;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句