Question

我使用了一个可拖动的jquery，我想做的是当我点击并按住标题时，光标转向移动光标。我已经尝试过css active和focus但没有任何事情发生。

Answer 1

对于纯CSS方法，您可能会发现CSS :active伪选择器/伪元素是可行的方法，使用div:active进行演示：jsbin

如果不这样做，你也可以使用jQuery添加一个选择器（我不太确定.click()是否需要按下鼠标按钮和，所以我建议mousedown()

$('#divIDOrClass').mouseup(
function() {
    $(this).removeClass('active');
}).mousedown(
function() {
    $(this).addClass('active')
});

在jsbin上演示jQuery方法。

顺便提一下，:focus没有/不起作用的原因是因为:focus通常应用于那些具有键盘或其他输入焦点的元素。这通常用于表单输入元素和超链接（因为超链接可以通过 tab ，access-keys和输入标准接收键盘激活）。

Answer 2

您可以这样定义光标样式：

$(function() {
    $( "#draggable" ).draggable({ cursorAt: { cursor: "move", top: 56, left: 56 } });
    $( "#draggable2" ).draggable({ cursorAt: { cursor: "crosshair", top: -5, left: -5 } });
    $( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
});

了解更多信息：http://jqueryui.com/demos/draggable/#cursor-style

Answer 3

您是否为可拖动部分尝试了内置游标功能？

//The css cursor during the drag operation.

//Code examples

//Initialize a draggable with the cursor option specified.
$( ".selector" ).draggable({ cursor: 'crosshair' });
//Get or set the cursor option, after init.
//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );

http://jqueryui.com/demos/draggable/#option-cursor

Answer 4

这是另一个关于“纯CSS”的建议（不是真的，在我们仍在使用jQuery UI的意义上）解决方案：请注意，只要元素是类，就会将类ui-draggable-dragging添加到元素中被拖了。因此这样简单：

.ui-draggable-dragging {
    cursor: move;
}

Should work。否则罗伯特使用cursor选项的答案也应该这样做。

CSS或javascript点击保持功能

4 个答案: