javascript - 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

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

一些评论，为了 fiddle 的缘故，我不得不用真实的元素替换你的对象，

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

但我认为主要问题是let。我必须用 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/