How do I force the pointer icon to 'grab', override underlying cursor styles while panning? - html

Question

When I set the css of the container to 'grab' I see that it changes, but most of the viewport contains divs with pointer 'hand', which override it.
I want to give the impression that the grab is strictly for panning the contents of the viewport and nothing else.
Some ideas:
use !important (but Javascript css doesn't support that).
Use an invisible or 0 opacity div for panning mode (I am going to try this
one.
Something better that is commonly used that I don't know about
yet.

Answer 1

I wound up creating a jsFiddle by modifying one that I found which was doing something similar.
var scale = 1.0;
var drag = {
elem: null,
x: 0,
y: 0,
state: false
};
var delta = {
x: 0,
y: 0
};
$(document).mousedown(function(e) {
if (!drag.state) {
let $workspace = $('#workspace');
let $workspaceContents = $('.workspace_contents');
$('#pan-screen').css({
width: $workspaceContents.width,
height: $workspaceContents.height
});
drag.elem = $('.workspace-contents');
drag.x = e.pageX;
drag.y = e.pageY;
drag.state = true;
}
return false;
});
$(document).mousemove(function(e) {
if (drag.state) {
delta.x = e.pageX - drag.x;
delta.y = e.pageY - drag.y;
var cur_offset = $(drag.elem).offset();
$(drag.elem).offset({
left: (cur_offset.left + delta.x),
top: (cur_offset.top + delta.y)
});
drag.x = e.pageX;
drag.y = e.pageY;
}
});
$(document).mouseup(function() {
if (drag.state) {
drag.state = false;
}
});
solution fiddle:
https://jsfiddle.net/davidjmcclelland/t51b96em/27/