CODEWITHSUNDEEP
jqueryhtml
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

Changing the cursor on a hold down?

So i want to change the cursor from 

#sideBar ul li .template{
 cursor:pointer;
}

to maybe cursor:move; when the user is dragging...is there something i can use in jQuery or html to make this happen you hold down the mouse button

Upvotes: 5

Views: 23915

Answers (5)

Stephen P
Stephen P

Reputation: 14810

I'm not going to repeat essentially the same code others have posted, but a proper drag shouldn't be triggered on simply a mousedown event.

On mousedown you should flag a Possible Drag and save the mouse coordinates where the mousedown occurred, then attach a mousemove handler. (This way you don't constantly track mousemoves when you're only really interested in them during a drag)

The mousemove handler should change the CSS class of the dragged element only when the distance between the saved mousedown coordinates and the current mouse coordinates is greater than some delta. This prevents every brief/accidental click from looking like a drag.

Finally, on drop (mouseup) then handle the drop event as desired, and clear the Possible Drag flag and the saved mousedown coordinates.

Watch an OS Desktop click-and-hold on an icon, without moving, then begin moving -- you'll see that this outline is how it behaves.

Upvotes: 2

JustcallmeDrago
JustcallmeDrago

Reputation: 1883

Instead of changing the css in your javascript code, keep it to just changing one class, which will update your element with as many different things as you want. I added a :hover pseudo-class because I'm not sure if cursor works without it.

Also, live works for any element added in the future and bind does not.

Css:

#sideBar ul li .template{
 cursor:pointer;
}

#sideBar ul li .template.mouseDown:hover{
 cursor:auto; /* or whatever cursor */
}

Javascript:

$("#sideBar ul li .template").live("mousedown", function () {
    $(this).addClass("mouseDown");
}).live("mouseup", function () {
    $(this).removeClass("mouseDown");
});

Upvotes: 14

Aardvark
Aardvark

Reputation: 1264

Sure, you can definitely do this. The Jquery .mouseDown function can be set as a handler, then you only need to change the css. Heres an example

$('.someElement').mousedown(function()
{
   $(this).css('cursor', 'move');
});
$('.someElement').mouseup(function()
{ 
   $(this).css('cursor', 'pointer');
});

Upvotes: 2

Harmen
Harmen

Reputation: 22436

Try something like this:

someFunc({
  onstart: function(){
     $(document.body).css( 'cursor', 'move' );
  },

  onstop: function(){
     $(document.body).css( 'cursor', 'auto' );
  }
});

Where onstart must be triggered when the dragging starts, and onstop when it ends.

If you're creating a custom drag function, you could use mousedown and mouseup events:

$(el)
  .mousedown(function(){
    $(this).css( 'cursor', 'move' );
  })
  .mouseup(function(){
    $(this).css( 'cursor', 'auto' );
  });

Upvotes: 1

kafuchau
kafuchau

Reputation: 5593

You can try binding a css change to the mousedown event using jQuery. And then use mouseup() to change the cursor back when the user has finished dragging.

e.g.:

$(document).ready(function() {
    $('#sideBar ul li .template').mousedown(function() {
        $(this).css('cursor', 'move');
    });
    $('#sideBar ul li .template').mouseup(function() {
        $(this).css('cursor', 'pointer');
    });
});

Upvotes: 2

Related Questions