CSS or javascript click hold function

Question

I use a jquery draggable and I wanted to do is when I click and hold the header, the cursor turns to move cursor. I already tried css active and focus but nothing happen.

Answer 1

For a pure CSS approach, you might find that the CSS :active pseudo-selector/pseudo-element is the way to go, demo using div:active at: jsbin

Failing that, though, you might as well use jQuery to add a selector (I'm not quite sure whether .click() requires the mouse-button to be pressed and released, so I'd suggest mousedown()

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

Demo of the jQuery approach at: jsbin.

Incidentally, the reason that :focus didn't/doesn't work is because :focus is usually applied to those elements that have keyboard, or other input, focus. This is normally for form input elements and hyper-links (since hyper-links can receive keyboard activation as standard via tab, access-keys and enter).

Answer 2

Did you try the built in cursor functionality for the draggable section?

//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 3

you can define your cursor style this way:

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

for more info: http://jqueryui.com/demos/draggable/#cursor-style

Answer 4

Here's another suggestion for a "pure CSS" (not really, in the sense that we're still working with jQuery UI here) solution: notice that the class ui-draggable-dragging is added to the element whenever the element is being dragged. Therefore something simple like this:

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

Should work. Otherwise Robert's answer with the cursor option should also do.