-
Notifications
You must be signed in to change notification settings - Fork 782
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make a div resizable AND draggable. #166
Comments
As I said earlier today on Gitter, yes, it is possible. It would be helpful if you provided a concise working demo that shows how you are trying to achieve this. |
The resizing demo on http://interactjs.io#resizing shows resizing and dragging: function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener
})
.resizable({
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target;
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// 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.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = event.rect.width + '×' + event.rect.height;
}); |
Hi, |
The following works fine for the resizing demo on the project homepage: interact('.resize-drag').on('dragmove resizemove', function (e) {
console.log(e.type);
}) Drag happens when the pointer is in the middle of the element and resize at the edges. |
I think that in my case the resize zone is over the drag zone. |
I've added a resize margin option so you have some more control over how close to the edges the pointer must be for a resize to happen. That might help. interact(target).resizable({ margin: 10 }); |
thanks. i'm try it now |
@taye Exactly what I was looking for. Thanks. |
@DRSDavidSoft You're welcome! |
@taye Just what i was looking for. Works for me like charm 😊😊 |
Is this possible, because I can't seem to achieve this.
The text was updated successfully, but these errors were encountered: