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

这是一个更新的小提琴，适用于几乎你的代码

一些评论，为了小玩意，我不得不用真实的元素替换你的对象，

然后你可能会使用Angualar或类似的东西，所以不得不删除你的 $范围$适用（）。和$ 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游标不会改变

2 个答案: