当我将容器的css设置为'grab'时,我看到它发生了变化,但是大多数视口都包含带有指针'hand'的div,这些div覆盖了它。
我想给人的印象是,抓取严格地用于平移视口的内容,而没有其他任何事情。
一些想法:


使用!important(但Javascript CSS不支持该功能)。
将不可见或0不透明度div用于平移模式(我将尝试使用
一。
我不知道的更好的常用东西
然而。

最佳答案

我通过修改发现的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/

关于html - 如何在平移时强制指针图标“抓取”,覆盖基础光标样式?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55128982/

10-13 01:41