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

下面是一个更新的小提琴，它几乎可以用于您的代码。

几句话，我不得不用一个真实的元素来代替你的对象，

然后您可能会使用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/

Answer 2

我通过我自己在示例中实现了光标样式设置。

代码：

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