如何强制指针图标"抓取",在平移时覆盖底层光标样式?



当我将容器的CSS设置为'抓取'时,我会看到它发生了变化,但是大多数视口都包含divsdivs tim pointer'hand',它覆盖了它。我想给人一种印象,即严格来说,抢劫是为了盖上视口的内容,而别无其他。一些想法:

  1. 使用!重要(但是JavaScript CSS不支持这一点)。
  2. 使用无形或0不透明度DIV进行平移模式(我要尝试一下一个。
  3. 我不知道的更好的东西但是。

我通过修改我发现正在做类似事物的一种来创建一个JSfiddle。

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;
  }
});

解决方案小提琴:https://jsfiddle.net/davidjmcclelland/t51b96em/27/

最新更新