1

I'm making an element (id="moveable1") draggable/moveable with Scriptaculous:

<script>new Draggable('moveable1');</script>

Using javascript - How can I best/easiest change the cursor style to 'move' (rather than use CSS - i.e. so it doesnt signify moveable if they don't have javascript).

I hoped to find it as a Scriptaculous option, but haven't ;(

user801347
  • 1,165
  • 3
  • 14
  • 28

4 Answers4

2

Thank you both.

For the moment I've gone with:

<script>
new Draggable('moveable1');
document.getElementById("moveable1").style.cursor = "move";
// ... repeat for other moveable objects
</script>

As that seems easy to read and understand.

user801347
  • 1,165
  • 3
  • 14
  • 28
1

You could add it as CSS that only shows if Javascript is enabled, like this:

.js-enabled #moveable1 {
  cursor: move
}

and then add a script to add the class to the body if JS is enabled:

<script>
  document.body.className += ' js-enabled';
</script>
Alex
  • 8,353
  • 9
  • 45
  • 56
0

Take a look at the docs for the JS hover event. You have to use CSS to change the mouse pointer (info on how to do that here and here) but if your event is triggered by JavaScript then it's OK to modify the CSS. Because your CSS won't change if they don't have JS enabled.

I hope that makes sense. So to sum up: Use JS to trigger the event that changes the CSS.

Jamie
  • 1,530
  • 1
  • 19
  • 35
  • 1
    Thanks - will read. I tried to use " $("#moveable1").css({"cursor": "move"}); " but it seems I may have a conflict between 'jquery-ui.js' and 'script.aculoouse.js' – user801347 Nov 25 '19 at 15:22
  • Yeah I'm not very experienced in jQuery sorry. That's why I tried to find a pure JS one. – Jamie Nov 25 '19 at 15:24
0

To set or change the mouse cursor style for an element of your page from script, you can set the element's property element.style.cursor to one of the above values.

(Alternatively, without JavaScript, you can use the attribute style="cursor:value;" in that element's HTML tag.) Example. The function setCursorByID below resets the mouse cursor style, given the input arguments id (the element ID) and cursorStyle (the desired cursor style):

function setCursorByID(id,cursorStyle) {
 var elem;
 if (document.getElementById &&
    (elem=document.getElementById(id)) ) {
  if (elem.style) elem.style.cursor=cursorStyle;
 }
}

The following demo allows you to change the cursor styles for the highlighted elements (Element 1 and Element 2). In this demo, when you click on the hyperlink help, wait, crosshair, text, default, move, or pointer, the cursor is changed to the corresponding style for the entire highlighted element using the function setCursorByID from the above example.

When you click on the hyperlink auto, the cursor for the particular element is reset to its original style determined by the browser.

Element 1 Change cursor to any of these styles: help wait move crosshair text default pointer auto

Element 2 Change cursor to any of these styles: help wait move crosshair text default pointer auto

Moiz Sharif
  • 31
  • 9