interact.js 光标没有改变

Question

在 interact.js 的示例中，光标在调整大小的边缘发生变化。我尝试了这个例子，但我的光标保持不变。

有人知道为什么它不会改变吗？

代码：

interact(obj.src[0])
  .resizable({
    invert: 'reposition',
    snap: {
      targets: [
        interact.createSnapGrid({
          x: $scope.editorOpt.gridSize,
          y: $scope.editorOpt.gridSize
        })
      ],
      range: Infinity
    },
    edges: {
      left: true,
      right: true,
      bottom: true,
      top: true
    }
  })
  .on('resizemove', function(event) {
    var target = event.target;
    let x = $(target).position().left;
    let y = $(target).position().top;
    // update the element's style
    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    $(target).css("left", x + "px");
    $(target).css("top", y + "px");

    obj.style.width = event.rect.width;
    obj.style.height = event.rect.height;

    obj.style.left = x;
    obj.style.top = y;

    $scope.$apply();
  });

Answer 1

我自己实现了示例中的光标样式

代码：

this.src.mousemove(function(ev){
    if($(this).hasClass("selected")){
        let w = $(this).outerWidth(true);
        let h = $(this).outerHeight(true);
        let offset = 10;

        if((ev.offsetX <= offset && ev.offsetY <= offset) || ((w-ev.offsetX) <= offset && (h-ev.offsetY) <= offset))
            $(this).css("cursor", "nwse-resize");
        else if((ev.offsetX <= offset && (h-ev.offsetY) <= offset) || ((w-ev.offsetX) <= offset && ev.offsetY <= offset))
            $(this).css("cursor", "nesw-resize");
        else if(ev.offsetX <= offset || (w-ev.offsetX) <= offset)
            $(this).css("cursor", "ew-resize");
        else if(ev.offsetY <= offset || (h-ev.offsetY) <= offset)
            $(this).css("cursor", "ns-resize");
        else
            $(this).css("cursor", "");
    }
});

Answer 2

这是一个更新后的 fiddle，几乎适用于您的代码

几点说明，为了 fiddle 的缘故，我不得不用真实元素替换你的对象，

那么你可能使用 Angualar 或类似的东西，所以不得不删除你的 $scope.$apply();和 $scope.editorOpt.gridSize。我只是用 100 替换了它。

但我认为主要问题是让。我不得不用 var 替换它们，然后一切都开始工作了。请确保查看您的控制台以查看错误：

let x = $(target).position().left;
let y = $(target).position().top;

改为

var x = $(target).position().left;
var y = $(target).position().top;

换句话说，我认为你有一个 javascript 错误，它阻止了交互脚本将它的光标附加到你的元素。

https://jsfiddle.net/qof6y2L1/1/

interact.js 光标没有改变

interact.js cursor is not changing

javascript

jquery

interact.js