In the example of interact.js the cursor is changing on the re-size edges. I tried the example but my cursor stays the same.
Does someone know why it wont change?
Code:
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();
});
Here is an updated fiddle that works with almost your code
A few remarks, I had to replace you object with a real element for the fiddles sake,
Then you probably use Angualar or something similar, so had to remove your $scope.$apply(); and $scope.editorOpt.gridSize. I simply replaced that with 100.
But I think the main problem was the let. I had to replace them with var and all started to work. Please make sure to look at your console to see errors:
let x = $(target).position().left;
let y = $(target).position().top;
Changed to
var x = $(target).position().left;
var y = $(target).position().top;
I other words, I think you have a javascript error, that prevents the interact script to attach it's cursors to your element.